* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    background-color: #F7F3FE;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.container {
    width: 100%;
    max-width: 680px;
}

.logo {
    text-align: center;
    margin-bottom: 32px;
}

.logo-image {
    height: 48px;
    width: auto;
}

.transfer-box {
    background-color: white;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 4px 24px rgba(58, 86, 142, 0.08);
}

.transfer-header {
    margin-bottom: 32px;
    text-align: center;
}

.transfer-name {
    font-size: 28px;
    font-weight: 600;
    color: #3A568E;
    margin-bottom: 8px;
}

.transfer-meta {
    font-size: 14px;
    font-weight: 400;
    color: #9E9FA0;
    margin-top: 16px;
}

.transfer-dates {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 12px;
}

.transfer-date {
    font-size: 13px;
    font-weight: 400;
    color: #9E9FA0;
}

.transfer-date-expires {
    color: #EE0F59;
}

.file-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
    max-height: 324px;
    overflow-y: auto;
    padding-right: 4px;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: #F7F3FE;
    border-radius: 12px;
    transition: background-color 0.2s ease;
}

.file-item:hover {
    background-color: #F0EDF8;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.file-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.file-icon-folder {
    background-color: #E77F00;
}

.file-icon-folder::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: white;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 5C3 4.44772 3.44772 4 4 4H8L10 6H16C16.5523 6 17 6.44772 17 7V15C17 15.5523 16.5523 16 16 16H4C3.44772 16 3 15.5523 3 15V5Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 5C3 4.44772 3.44772 4 4 4H8L10 6H16C16.5523 6 17 6.44772 17 7V15C17 15.5523 16.5523 16 16 16H4C3.44772 16 3 15.5523 3 15V5Z' fill='white'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.file-icon-file {
    background-color: #509EE7;
}

.file-icon-file::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: white;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 3C3.44772 3 3 3.44772 3 4V16C3 16.5523 3.44772 17 4 17H16C16.5523 17 17 16.5523 17 16V7H12C11.4477 7 11 6.55228 11 6V3H4ZM13 4.41421L15.5858 7H13V4.41421Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 3C3.44772 3 3 3.44772 3 4V16C3 16.5523 3.44772 17 4 17H16C16.5523 17 17 16.5523 17 16V7H12C11.4477 7 11 6.55228 11 6V3H4ZM13 4.41421L15.5858 7H13V4.41421Z' fill='white'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.file-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.file-name {
    font-size: 15px;
    font-weight: 500;
    color: #3A568E;
}

.file-size {
    font-size: 13px;
    font-weight: 400;
    color: #9E9FA0;
}

.download-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #0ECCC6;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
    flex-shrink: 0;
}

.download-btn:hover {
    background-color: #0CB8B2;
    transform: scale(1.05);
}

.download-btn:active {
    transform: scale(0.95);
}

.download-icon {
    width: 20px;
    height: 20px;
}

.download-all-btn {
    width: 100%;
    padding: 16px 32px;
    background-color: #9954FC;
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.download-all-btn:hover {
    background-color: #8A47E3;
    transform: scale(1.02);
}

.download-all-btn:active {
    transform: scale(0.98);
}

.error-box {
    text-align: center;
    padding: 48px 40px;
}

.error-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid;
    background-color: transparent;
}

.error-icon-expired {
    border-color: #EE0F59;
}

.error-icon-expired::before {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #EE0F59;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20 4C11.1634 4 4 11.1634 4 20C4 28.8366 11.1634 36 20 36C28.8366 36 36 28.8366 36 20C36 11.1634 28.8366 4 20 4ZM20 10C21.1046 10 22 10.8954 22 12V20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20V12C18 10.8954 18.8954 10 20 10ZM20 26C21.1046 26 22 26.8954 22 28C22 29.1046 21.1046 30 20 30C18.8954 30 18 29.1046 18 28C18 26.8954 18.8954 26 20 26Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20 4C11.1634 4 4 11.1634 4 20C4 28.8366 11.1634 36 20 36C28.8366 36 36 28.8366 36 20C36 11.1634 28.8366 4 20 4ZM20 10C21.1046 10 22 10.8954 22 12V20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20V12C18 10.8954 18.8954 10 20 10ZM20 26C21.1046 26 22 26.8954 22 28C22 29.1046 21.1046 30 20 30C18.8954 30 18 29.1046 18 28C18 26.8954 18.8954 26 20 26Z' fill='white'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.error-icon-error {
    border-color: #E77F00;
}

.error-icon-error::before {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #E77F00;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20 4C11.1634 4 4 11.1634 4 20C4 28.8366 11.1634 36 20 36C28.8366 36 36 28.8366 36 20C36 11.1634 28.8366 4 20 4ZM14.5858 14.5858C15.3668 13.8047 16.6332 13.8047 17.4142 14.5858L20 17.1716L22.5858 14.5858C23.3668 13.8047 24.6332 13.8047 25.4142 14.5858C26.1953 15.3668 26.1953 16.6332 25.4142 17.4142L22.8284 20L25.4142 22.5858C26.1953 23.3668 26.1953 24.6332 25.4142 25.4142C24.6332 26.1953 23.3668 26.1953 22.5858 25.4142L20 22.8284L17.4142 25.4142C16.6332 26.1953 15.3668 26.1953 14.5858 25.4142C13.8047 24.6332 13.8047 23.3668 14.5858 22.5858L17.1716 20L14.5858 17.4142C13.8047 16.6332 13.8047 15.3668 14.5858 14.5858Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20 4C11.1634 4 4 11.1634 4 20C4 28.8366 11.1634 36 20 36C28.8366 36 36 28.8366 36 20C36 11.1634 28.8366 4 20 4ZM14.5858 14.5858C15.3668 13.8047 16.6332 13.8047 17.4142 14.5858L20 17.1716L22.5858 14.5858C23.3668 13.8047 24.6332 13.8047 25.4142 14.5858C26.1953 15.3668 26.1953 16.6332 25.4142 17.4142L22.8284 20L25.4142 22.5858C26.1953 23.3668 26.1953 24.6332 25.4142 25.4142C24.6332 26.1953 23.3668 26.1953 22.5858 25.4142L20 22.8284L17.4142 25.4142C16.6332 26.1953 15.3668 26.1953 14.5858 25.4142C13.8047 24.6332 13.8047 23.3668 14.5858 22.5858L17.1716 20L14.5858 17.4142C13.8047 16.6332 13.8047 15.3668 14.5858 14.5858Z' fill='white'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.error-icon-limit {
    border-color: #9954FC;
}

.error-icon-limit::before {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #9954FC;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20 4C11.1634 4 4 11.1634 4 20C4 28.8366 11.1634 36 20 36C28.8366 36 36 28.8366 36 20C36 11.1634 28.8366 4 20 4ZM12.5858 12.5858C13.3668 11.8047 14.6332 11.8047 15.4142 12.5858L20 17.1716L24.5858 12.5858C25.3668 11.8047 26.6332 11.8047 27.4142 12.5858C28.1953 13.3668 28.1953 14.6332 27.4142 15.4142L22.8284 20L27.4142 24.5858C28.1953 25.3668 28.1953 26.6332 27.4142 27.4142C26.6332 28.1953 25.3668 28.1953 24.5858 27.4142L20 22.8284L15.4142 27.4142C14.6332 28.1953 13.3668 28.1953 12.5858 27.4142C11.8047 26.6332 11.8047 25.3668 12.5858 24.5858L17.1716 20L12.5858 15.4142C11.8047 14.6332 11.8047 13.3668 12.5858 12.5858Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20 4C11.1634 4 4 11.1634 4 20C4 28.8366 11.1634 36 20 36C28.8366 36 36 28.8366 36 20C36 11.1634 28.8366 4 20 4ZM12.5858 12.5858C13.3668 11.8047 14.6332 11.8047 15.4142 12.5858L20 17.1716L24.5858 12.5858C25.3668 11.8047 26.6332 11.8047 27.4142 12.5858C28.1953 13.3668 28.1953 14.6332 27.4142 15.4142L22.8284 20L27.4142 24.5858C28.1953 25.3668 28.1953 26.6332 27.4142 27.4142C26.6332 28.1953 25.3668 28.1953 24.5858 27.4142L20 22.8284L15.4142 27.4142C14.6332 28.1953 13.3668 28.1953 12.5858 27.4142C11.8047 26.6332 11.8047 25.3668 12.5858 24.5858L17.1716 20L12.5858 15.4142C11.8047 14.6332 11.8047 13.3668 12.5858 12.5858Z' fill='white'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.error-title {
    font-size: 28px;
    font-weight: 600;
    color: #3A568E;
    margin-bottom: 16px;
}

.error-message {
    font-size: 16px;
    font-weight: 400;
    color: #9E9FA0;
    line-height: 1.5;
    max-width: 480px;
    margin: 0 auto;
}

.password-box {
    text-align: center;
    padding: 48px 40px;
}

.password-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #509EE7;
    background-color: transparent;
}

.password-icon::before {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #509EE7;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20 8C15.5817 8 12 11.5817 12 16V18H10C8.89543 18 8 18.8954 8 20V30C8 31.1046 8.89543 32 10 32H30C31.1046 32 32 31.1046 32 30V20C32 18.8954 31.1046 18 30 18H28V16C28 11.5817 24.4183 8 20 8ZM20 12C22.2091 12 24 13.7909 24 16V18H16V16C16 13.7909 17.7909 12 20 12Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20 8C15.5817 8 12 11.5817 12 16V18H10C8.89543 18 8 18.8954 8 20V30C8 31.1046 8.89543 32 10 32H30C31.1046 32 32 31.1046 32 30V20C32 18.8954 31.1046 18 30 18H28V16C28 11.5817 24.4183 8 20 8ZM20 12C22.2091 12 24 13.7909 24 16V18H16V16C16 13.7909 17.7909 12 20 12Z' fill='white'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.password-title {
    font-size: 28px;
    font-weight: 600;
    color: #3A568E;
    margin-bottom: 16px;
}

.password-message {
    font-size: 16px;
    font-weight: 400;
    color: #9E9FA0;
    line-height: 1.5;
    max-width: 480px;
    margin: 0 auto 32px;
}

.password-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 320px;
    margin: 0 auto;
}

.password-field {
    width: 100%;
}

.password-input {
    width: 100%;
    padding: 14px 16px;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #3A568E;
    border: 2px solid #D9D9D9;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.password-input::placeholder {
    color: #9E9FA0;
}

.password-input:focus {
    border-color: #9954FC;
    box-shadow: 0 0 0 4px rgba(153, 84, 252, 0.1);
}

.password-submit-btn {
    width: 100%;
    padding: 16px 32px;
    background-color: #9954FC;
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.password-submit-btn:hover {
    background-color: #8A47E3;
    transform: scale(1.02);
}

.password-submit-btn:active {
    transform: scale(0.98);
}

.footer {
    text-align: center;
    margin-top: 32px;
}

.footer-text {
    font-size: 13px;
    font-weight: 400;
    color: #9E9FA0;
}

.footer-link {
    color: #9954FC;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #3A568E;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .transfer-box {
        padding: 24px;
        border-radius: 16px;
    }

    .transfer-name {
        font-size: 22px;
    }

    .file-item {
        padding: 12px 16px;
    }
}

.terms-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.terms-modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.terms-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(58, 86, 142, 0.75);
    backdrop-filter: blur(4px);
}

.terms-modal-content {
    position: relative;
    background-color: white;
    border-radius: 24px;
    padding: 40px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(58, 86, 142, 0.2);
    z-index: 1;
}

.terms-modal-title {
    font-size: 24px;
    font-weight: 600;
    color: #3A568E;
    margin-bottom: 20px;
    text-align: center;
}

.terms-modal-text {
    margin-bottom: 24px;
}

.terms-modal-text p {
    font-size: 15px;
    font-weight: 400;
    color: #9E9FA0;
    line-height: 1.6;
    margin-bottom: 12px;
}

.terms-modal-text p:last-child {
    margin-bottom: 0;
}

.terms-modal-text a {
    color: #9954FC;
    text-decoration: none;
    transition: color 0.2s ease;
}

.terms-modal-text a:hover {
    color: #3A568E;
    text-decoration: underline;
}

.terms-modal-accept-btn {
    width: 100%;
    padding: 16px 32px;
    background-color: #9954FC;
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.terms-modal-accept-btn:hover {
    background-color: #8A47E3;
    transform: scale(1.02);
}

.terms-modal-accept-btn:active {
    transform: scale(0.98);
}