:root{--pd-primary:var(--pixel-primary,#2563eb);--pd-primary-contrast:#fff;--pd-text:var(--pixel-text-primary,#182230);--pd-text-muted:var(--pixel-text-secondary,#667085);--pd-border:var(--pixel-border,#e4e7ec);--pd-border-strong:#cfd4dc;--pd-surface:var(--pixel-surface,#fff);--pd-surface-hover:#f8fafc;--pd-radius-sm:8px;--pd-radius-md:10px;--pd-radius-lg:12px;--pd-shadow:0 1px 2px rgba(16,24,40,.04);--pd-shadow-hover:0 6px 18px rgba(16,24,40,.08);--pd-transition:180ms ease}
.pixel-download-files{display:grid;gap:12px;width:100%}.pixel-download-files--grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.pixel-download-files--compact,.pixel-download-files--inline{gap:8px}.pixel-download-files__header{align-items:center;color:var(--pd-text);display:flex;gap:10px;justify-content:space-between;margin-bottom:2px}.pixel-download-files__header-title{font-size:15px;font-weight:650;letter-spacing:-.01em}.pixel-download-files__header-count{color:var(--pd-text-muted);font-size:13px}.pixel-download-files__header-meta{align-items:center;display:flex;gap:10px}.pixel-download-files__header .pixel-download-download-all{margin:0}
.pixel-download-file{align-items:center;background:var(--pd-surface);border:1px solid var(--pd-border);border-radius:var(--pd-radius-md);box-shadow:var(--pd-shadow);box-sizing:border-box;color:var(--pd-text);display:flex;gap:12px;min-width:0;padding:12px 14px;position:relative;transition:background-color var(--pd-transition),border-color var(--pd-transition),box-shadow var(--pd-transition),transform var(--pd-transition)}.pixel-download-file:hover{background:var(--pd-surface-hover);border-color:color-mix(in srgb,var(--pd-primary) 42%,var(--pd-border));box-shadow:var(--pd-shadow-hover);transform:translateY(-1px)}.pixel-download-file:focus-within{border-color:var(--pd-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--pd-primary) 16%,transparent)}.pixel-download-file--compact{border-radius:var(--pd-radius-sm);box-shadow:none;padding:8px 10px}.pixel-download-file--compact:hover{box-shadow:var(--pd-shadow);transform:none}.pixel-download-file--grid{align-items:flex-start;flex-direction:column;min-height:168px;padding:16px}.pixel-download-file--grid .pixel-download-file__action{align-self:flex-start;margin-top:auto}.pixel-download-file--minimal{background:transparent;border-color:transparent;border-radius:0;box-shadow:none;padding:4px 0}.pixel-download-file--minimal:hover{background:transparent;border-color:transparent;box-shadow:none;transform:none}
.pixel-download-file__visual{align-items:center;display:flex;flex:0 0 auto;justify-content:center;line-height:1}.pixel-download-file__content{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.pixel-download-file__name{color:inherit;font-size:14px;font-weight:600;line-height:1.42;max-width:100%;overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis}.pixel-download-file--card .pixel-download-file__name,.pixel-download-file--compact .pixel-download-file__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.pixel-download-file__meta{color:var(--pd-text-muted);font-size:12px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pixel-download-file-badge{--pd-badge-size:44px;--pd-badge-text:#475467;--pd-badge-bg:#f2f4f7;--pd-badge-border:#d0d5dd;align-items:center;box-sizing:border-box;color:var(--pd-badge-text);display:inline-flex;flex:0 0 auto;font-size:12px;font-weight:750;height:var(--pd-badge-size);justify-content:center;letter-spacing:.045em;line-height:1;min-width:var(--pd-badge-size);text-align:center;text-transform:uppercase}.pixel-download-file-badge__label{display:block;max-width:calc(var(--pd-badge-size) - 8px);overflow:hidden;text-overflow:ellipsis}.pixel-download-file-badge--soft{background:var(--pd-badge-bg);border:1px solid transparent;border-radius:9px}.pixel-download-file-badge--solid{background:var(--pd-badge-text);border:1px solid var(--pd-badge-text);border-radius:9px;color:#fff}.pixel-download-file-badge--outline{background:transparent;border:1px solid var(--pd-badge-border);border-radius:9px}.pixel-download-file-badge--minimal{background:transparent;border:0;min-width:auto;padding:0}.pixel-download-file-badge--pdf{--pd-badge-text:#b4232c;--pd-badge-bg:#fff1f2;--pd-badge-border:#fecdd3}.pixel-download-file-badge--orange{--pd-badge-text:#b54708;--pd-badge-bg:#fff6ed;--pd-badge-border:#fed7aa}.pixel-download-file-badge--psd,.pixel-download-file-badge--word,.pixel-download-file-badge--hwp{--pd-badge-text:#175cd3;--pd-badge-bg:#eff8ff;--pd-badge-border:#b2ddff}.pixel-download-file-badge--archive{--pd-badge-text:#6941c6;--pd-badge-bg:#f9f5ff;--pd-badge-border:#d9d6fe}.pixel-download-file-badge--excel{--pd-badge-text:#067647;--pd-badge-bg:#ecfdf3;--pd-badge-border:#abefc6}.pixel-download-file-badge--image{--pd-badge-text:#0e7090;--pd-badge-bg:#ecfdff;--pd-badge-border:#a5f0fc}.pixel-download-file-badge--video{--pd-badge-text:#6d28d9;--pd-badge-bg:#f5f3ff;--pd-badge-border:#ddd6fe}.pixel-download-file-badge--audio{--pd-badge-text:#c11574;--pd-badge-bg:#fdf2fa;--pd-badge-border:#fcceee}.pixel-download-file-badge--custom{--pd-badge-text:var(--pd-badge-text);--pd-badge-bg:var(--pd-badge-bg);--pd-badge-border:var(--pd-badge-border)}.pixel-download-file-icon{vertical-align:middle}
.pixel-download-file__thumbnail{border-radius:8px;display:block;height:44px;object-fit:cover;width:44px}.pixel-download-file__action{align-items:center;border:1px solid transparent;border-radius:8px;box-sizing:border-box;color:var(--pd-text-muted);display:inline-flex;flex:0 0 auto;font-size:13px;font-weight:600;gap:7px;justify-content:center;min-height:40px;min-width:40px;text-decoration:none;transition:background-color var(--pd-transition),border-color var(--pd-transition),color var(--pd-transition),transform var(--pd-transition)}.pixel-download-file__action-icon{height:20px;width:20px}.pixel-download-file__action--transparent{background:transparent}.pixel-download-file__action--soft{background:#f2f4f7}.pixel-download-file__action--outline{background:transparent;border-color:var(--pd-border-strong)}.pixel-download-file__action--filled{background:var(--pd-primary);color:var(--pd-primary-contrast)}.pixel-download-file:hover .pixel-download-file__action:not(.is-disabled){color:var(--pd-primary)}.pixel-download-file:hover .pixel-download-file__action--filled{color:var(--pd-primary-contrast)}.pixel-download-file__action:hover,.pixel-download-file__action:focus-visible{background:color-mix(in srgb,var(--pd-primary) 10%,#fff);border-color:color-mix(in srgb,var(--pd-primary) 35%,transparent);color:var(--pd-primary);outline:none}.pixel-download-file__action--filled:hover,.pixel-download-file__action--filled:focus-visible{background:color-mix(in srgb,var(--pd-primary) 88%,#000);color:var(--pd-primary-contrast)}.pixel-download-file__action:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--pd-primary) 22%,transparent)}.pixel-download-file__action:active{transform:translateY(1px)}.pixel-download-file__action.is-disabled{cursor:not-allowed;opacity:.45}.pixel-download-download-all{align-items:center;background:var(--pd-primary);border:1px solid var(--pd-primary);border-radius:8px;color:var(--pd-primary-contrast);display:inline-flex;font-size:13px;font-weight:650;justify-content:center;min-height:38px;padding:0 12px;text-decoration:none;transition:background-color var(--pd-transition),transform var(--pd-transition)}.pixel-download-download-all:hover,.pixel-download-download-all:focus-visible{background:color-mix(in srgb,var(--pd-primary) 88%,#000);color:var(--pd-primary-contrast)}.pixel-download-download-all:focus-visible{outline:3px solid color-mix(in srgb,var(--pd-primary) 22%,transparent);outline-offset:2px}
.pixel-download-button{align-items:center;background:var(--pd-primary);border:1px solid var(--pd-primary);border-radius:9px;box-sizing:border-box;color:var(--pd-primary-contrast);display:inline-flex;gap:10px;justify-content:center;min-height:44px;padding:8px 14px;text-decoration:none;transition:background-color var(--pd-transition),border-color var(--pd-transition),box-shadow var(--pd-transition),transform var(--pd-transition)}.pixel-download-button:hover{background:color-mix(in srgb,var(--pd-primary) 88%,#000);color:var(--pd-primary-contrast);transform:translateY(-1px)}.pixel-download-button:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--pd-primary) 24%,transparent);outline:none}.pixel-download-button:active{transform:translateY(0)}.pixel-download-button--icon-right{flex-direction:row-reverse}.pixel-download-button--icon-top{flex-direction:column}.pixel-download-button--icon-bottom{flex-direction:column-reverse}.pixel-download-button__content{display:flex;flex-direction:column;min-width:0}.pixel-download-button__text{font-weight:650;line-height:1.25}.pixel-download-button__meta{font-size:.79em;line-height:1.25;opacity:.82}.pixel-download-button .pixel-download-file-badge{--pd-badge-size:30px;font-size:10px}.pixel-download-button--size-small{min-height:36px;padding:6px 10px}.pixel-download-button--size-large{min-height:52px;padding:10px 18px}.pixel-download-button--size-large .pixel-download-file-badge{--pd-badge-size:36px}.pixel-download-button--text-extension .pixel-download-file-badge{display:none}
.pixel-download-file-type{align-items:center;color:var(--pd-text);display:inline-flex;gap:8px}.pixel-download-file-type .pixel-download-file-badge{--pd-badge-size:44px}.pixel-download-icon-widget{align-items:center;color:inherit;display:inline-flex;justify-content:center;line-height:1;text-decoration:none;transition:background-color var(--pd-transition),box-shadow var(--pd-transition),transform var(--pd-transition)}.pixel-download-icon-widget--circle{border-radius:50%}.pixel-download-icon-widget--square{border-radius:0}.pixel-download-icon-widget--round{border-radius:9px}.pixel-download-icon-widget .pixel-download-file-badge{--pd-badge-size:44px}.pixel-download-icon-widget:focus-visible{outline:2px solid currentColor;outline-offset:3px}.pixel-download-icon-widget:active{transform:translateY(1px)}.pixel-download-custom-icon{align-items:center;display:inline-flex;height:1em;justify-content:center;width:1em}.pixel-download-custom-icon>svg{fill:currentColor;height:100%;width:100%}
.pixel-download-file-item{align-items:center;border:1px solid var(--pd-border);display:flex;gap:12px;padding:14px}.pixel-download-file-item__content{display:flex;flex:1;flex-direction:column;min-width:0}.pixel-download-file-item__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pixel-download-file-item__meta{font-size:.85em;opacity:.7}.pixel-download-file-item__button{white-space:nowrap}.pixel-download-notice{background:#fffaeb;border-left:3px solid #f79009;color:#7a2e0e;padding:10px}
@media(max-width:767px){.pixel-download-file{gap:10px;padding:10px}.pixel-download-file--grid{min-height:0}.pixel-download-file__action{min-height:40px;min-width:40px}.pixel-download-file-badge{--pd-badge-size:40px;font-size:11px}.pixel-download-file__thumbnail{height:40px;width:40px}.pixel-download-files--grid{grid-template-columns:1fr}.pixel-download-files__header{align-items:flex-start;flex-direction:column}.pixel-download-files__header-meta{align-items:flex-start;flex-direction:column}.pixel-download-file__name{font-size:14px}.pixel-download-file--compact .pixel-download-file__meta{display:none}}@media(max-width:360px){.pixel-download-file{align-items:flex-start}.pixel-download-file__action{margin-left:auto}.pixel-download-file__name{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}.pixel-download-file__meta{white-space:normal}}
