.mz-files { display: flex; flex-direction: column; gap: 14px; width: 100%; direction: rtl; margin: 18px 0; font-family: inherit; } .mz-file { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid #e5e7eb; border-radius: 14px; background: #ffffff; transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease; } .mz-file:not(.mz-file--locked):hover { border-color: #cbd5e1; background: #fcfcfd; box-shadow: 0 4px 15px rgba(0,0,0,0.02); } .mz-file__main { display: flex; align-items: center; gap: 14px; min-width: 0; } .mz-file__image { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 1px solid #e2e8f0; background-color: #f8fafc; } .mz-file__name { font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1.8; word-break: break-word; } .mz-file__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .mz-file--locked { transition: none !important; } .mz-file--locked:hover { transform: none; box-shadow: none; border-color: #e5e7eb; background: #ffffff; } .mz-status { height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 800; line-height: 1; white-space: nowrap; padding: 0 16px; min-width: 118px; border: 1px solid transparent; } .mz-status svg { width: 20px; height: 20px; display: block; } .mz-status.is-free { background: #ecfdf5; border-color: #bbf7d0; color: #15803d; } .mz-status.is-locked { background: #f8fafc; border-color: #e2e8f0; color: #475569; } .mz-btn { position: relative; overflow: hidden; height: 44px; min-width: 164px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; outline: none; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; } .mz-btn:focus-visible, .mz-btn:focus { outline: 2px solid #cbd5e1; outline-offset: 2px; } .mz-btn--login { background: #0f172a; color: #ffffff; border-color: #0f172a; gap: 8px; transition: none !important; } .mz-btn--login svg { width: 20px; height: 20px; position: relative; z-index: 2; } .mz-btn--login span { position: relative; z-index: 2; } .mz-btn--login:hover { background: #0f172a !important; border-color: #0f172a !important; color: #ffffff !important; transform: none; box-shadow: none; } .mz-btn--download { background: #111827; color: #ffffff; border-color: #111827; } .mz-btn--download:hover { background-color: #1f2937 !important; border-color: #1f2937 !important; color: #ffffff !important; } .mz-btn__content { display: none; align-items: center; justify-content: center; gap: 8px; position: relative; z-index: 2; width: 100%; transition: color 0.3s ease; } .mz-btn__content svg { width: 20px; height: 20px; } .mz-btn--download:not(.is-counting):not(.is-finished) .mz-btn__content--normal { display: flex; } .mz-btn--download.is-counting { background: #eafff2 !important; border-color: #eafff2 !important; pointer-events: none; } .mz-btn__fill { position: absolute; inset: 0 0 0 auto; width: var(--progress, 0%); background: #25D572; z-index: 1; border-radius: inherit; } .mz-btn--download.is-counting .mz-timer-base { display: flex; color: #166534; z-index: 2; } .mz-btn--download.is-counting .mz-timer-overlay { display: flex; color: #ffffff; z-index: 3; position: absolute; inset: 0; clip-path: inset(0 0 0 calc(100% - var(--progress, 0%))); } .mz-btn--download.is-finished { background: #25D572 !important; border-color: #25D572 !important; color: #ffffff !important; pointer-events: none; } .mz-btn--download.is-finished .mz-btn__content--success { display: flex; font-weight: 700; } .mz-btn__time { font-variant-numeric: tabular-nums; direction: ltr; min-width: 45px; text-align: left; } .mz-no-copy { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; } .mz-toast { position: fixed; left: 24px; bottom: 24px; z-index: 100001; display: flex; align-items: center; gap: 14px; max-width: min(90vw, 400px); padding: 18px 24px; border-radius: 16px; background: #ffffff; color: #0f172a; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15); border: 1px solid #e5e7eb; direction: rtl; opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; } .mz-toast.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .mz-toast__icon svg { width: 26px; height: 26px; display: block; } .mz-toast--success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; } .mz-toast--success .mz-toast__icon { color: #22c55e; } .mz-toast--success .mz-toast__progress { background: #22c55e; } .mz-toast--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .mz-toast--error .mz-toast__icon { color: #ef4444; } .mz-toast--error .mz-toast__progress { background: #ef4444; } .mz-toast--warning { background: #fffbeb; border-color: #fde68a; color: #92400e; } .mz-toast--warning .mz-toast__icon { color: #f59e0b; } .mz-toast--warning .mz-toast__progress { background: #f59e0b; } .mz-toast__content { flex: 1; font-size: 14px; font-weight: 700; line-height: 1.6; } .mz-toast__close { background: none; border: none; padding: 4px; color: inherit; cursor: pointer; border-radius: 6px; display: flex; align-items: center; transition: opacity 0.2s, background 0.2s; opacity: 0.6; } .mz-toast__close:hover { opacity: 1; background: rgba(0,0,0,0.05); } .mz-toast__close svg { width: 20px; height: 20px; } .mz-toast__progress { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; transform-origin: left; } .mz-toast.is-visible .mz-toast__progress { transition: transform linear; transform: scaleX(0); } .mz-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 18px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .mz-modal.is-open { display: flex; opacity: 1; visibility: visible; } .mz-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .mz-modal__dialog { position: relative; width: min(100%, 460px); background: #ffffff; border: 1px solid #e5e7eb; border-radius: 18px; padding: 32px 24px 24px; text-align: center; direction: rtl; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .mz-modal.is-open .mz-modal__dialog { transform: translateY(0) scale(1); } .mz-modal__close { position: absolute; top: 10px; left: 10px; padding: 7px; width: 40px; height: 40px; border-radius: 10px; border: none; background: #f2f4f7; color: #64748b; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .mz-modal__close:hover { background: #fee2e2; color: #ef4444; } .mz-modal__close svg { width: 22px; height: 22px; } .mz-modal__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .mz-modal__icon-inner { width: 72px; height: 72px; background: #ecfdf5; color: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .mz-modal__icon-inner svg { width: 48px; height: 48px; } .mz-modal__title { font-size: 22px; font-weight: 900; color: #0f172a; margin-bottom: 12px; } .mz-modal__message { font-size: 15px; line-height: 1.8; color: #475569; margin-bottom: 28px; } .mz-modal__actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .mz-modal__btn { flex: 1; min-width: 140px; height: 48px; padding: 0 20px; border-radius: 10px; border: 2px solid transparent; font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; } .mz-modal__btn svg { width: 20px; height: 20px; position: relative; z-index: 2; } .mz-modal__btn span { position: relative; z-index: 2; } .mz-modal__btn--primary { background: #25D572; color: #ffffff; border-color: #25D572; } .mz-modal__btn--primary:hover { background: #1faf5c; border-color: #1faf5c; color: #ffffff; box-shadow: 0 4px 15px rgba(37, 213, 114, 0.3); } .mz-modal__btn--secondary { background: #ffffff; border-color: #cbd5e1; color: #0f172a; } .mz-modal__btn--secondary:hover { background: #f8fafc; border-color: #94a3b8; color: #0f172a; } .mz-copy-content, .mz-copied-content { display: flex; align-items: center; gap: 8px; transition: opacity 0.2s; } .mz-copied-content { display: none; color: #166534; } .mz-modal__btn--secondary.is-copied { background: #ecfdf5; border-color: #22c55e; color: #166534; pointer-events: none; } .mz-modal__btn--secondary.is-copied .mz-copy-content { display: none; } .mz-modal__btn--secondary.is-copied .mz-copied-content { display: flex; } .mz-download-count { display: inline-block; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s; } .mz-download-count.is-updating { transform: scale(1.3); color: #25D572; } @media (max-width: 768px) { .mz-files { margin: 16px 0; } .mz-file { grid-template-columns: 1fr; gap: 12px; padding: 16px; } .mz-file__main { align-items: flex-start; } .mz-file__actions { width: 100%; justify-content: stretch; } .mz-status, .mz-btn { width: 100%; min-width: 0; } .mz-modal__dialog { padding: 28px 20px 20px; } .mz-modal__actions { flex-direction: column; } .mz-modal__btn { width: 100%; } .mz-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; } }