/* ── Fonts ── */
@import url('/static/css/fonts.css');

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

::selection {
    background: #79FFA1;
    color: #009249;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #00827B #E0E0E0;
}

*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: #E0E0E0;
}

*::-webkit-scrollbar-thumb {
    background: #00827B;
    border-radius: 4px;
}

body {
    background-color: #F5F5F7;
    font-family: 'Arimo', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.page-index {
    animation: blurReveal 1.2s cubic-bezier(0.05, 0.7, 0.1, 1) backwards;
}

@keyframes blurReveal {
    from { opacity: 0; filter: blur(9px); }
    to   { opacity: 1; filter: blur(0); }
}

@keyframes pageReveal {
    from { opacity: 1; }
    to { opacity: 0; visibility: hidden; }
}

@keyframes blurHide {
    from { opacity: 1; filter: blur(0); }
    to { opacity: 0; filter: blur(6px); }
}

@keyframes text-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Header ── */
.header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 5px;
}

.header {
    background-color: #E4E3E3;
    border-radius: 900px;
    width: max-content;
    min-width: max(40%, 500px);
    gap: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 28px;
    backdrop-filter: blur(10px);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-shrink: 0;
    white-space: nowrap;
}

.header > :not(.header-left) {
    flex-shrink: 0;
}

.logo-text {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: #000000;
    text-decoration: none;
    text-shadow:
        0.75px 0 0 currentColor,
        0 0.375px 0 currentColor;
}

.quicklinks {
    display: flex;
    align-items: center;
    gap: 24px;
}

.quicklinks a {
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    text-decoration: none;
}

.quicklinks a:hover {
    opacity: 0.7;
}

.lang-toggle {
    margin-left: 4px;
    padding-left: 14px;
    border-left: 1px solid #ccc;
}

.login-btn {
    background-color: #007AFF;
    color: #FFFFFF;
    border: none;
    border-radius: 34px;
    padding: 12px 32px;
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
}

.login-btn:hover {
    opacity: 0.9;
}

.login-btn .user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
    min-width: 120px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.login-btn.active .user-dropdown {
    display: block;
}
.user-dropdown a {
    display: block;
    padding: 10px 20px;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: background 0.15s;
}
.user-dropdown a:hover {
    background: #3a3a3a;
    color: #fff;
}

/* ── Account Menu (new dropdown with avatar) ── */
.account-menu-trigger {
    background: #fff !important;
    color: #1a1a1f !important;
    border: 1px solid #e2e2e6 !important;
    border-radius: 999px !important;
    padding: 10px 14px 10px 10px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.account-menu-trigger:hover {
    background: #fff !important;
    border-color: #c9c9d1 !important;
}
.account-menu-trigger:focus-visible {
    outline: 2px solid #c9c9d1 !important;
    outline-offset: 2px !important;
}

.account-menu-trigger[aria-expanded="true"] {
    background: #fff !important;
    color: #1a1a1f !important;
    border: 1px solid #c9c9d1 !important;
    box-shadow: 0 0 0 3px #f0f0f2 !important;
}
.account-menu-trigger[aria-expanded="true"] .account-menu-username {
    color: #1a1a1f;
}
.account-menu-trigger[aria-expanded="true"] i[data-lucide="chevron-down"],
.account-menu-trigger[aria-expanded="true"] svg[data-lucide="chevron-down"] {
    color: #78787f;
    transform: rotate(180deg);
}
.account-menu-trigger i[data-lucide="chevron-down"],
.account-menu-trigger svg[data-lucide="chevron-down"] {
    transition: transform 0.2s ease, color 0.15s ease;
}

.account-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.account-menu-avatar-img {
    border-radius: 50%;
    object-fit: cover;
    width: 24px;
    height: 24px;
    display: block;
}

.account-menu-username {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-menu-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.account-menu-trigger[aria-expanded="true"] + .account-menu {
    display: block !important;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    animation: account-menu-enter 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.account-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0 !important;
    background: #fff !important;
    border: 1px solid #e2e2e6 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(20,20,30,0.08), 0 2px 8px rgba(20,20,30,0.06) !important;
    min-width: 200px;
    padding: 6px !important;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-3px) scale(0.995);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.account-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px !important;
    color: #1a1a1f !important;
    text-decoration: none;
    font-family: 'Arimo', sans-serif;
    font-size: 14px;
    font-weight: 400;
    transition: background 0.12s ease, color 0.12s ease;
    border-bottom: 0 !important;
    border-radius: 8px !important;
}
.account-menu-item:last-child {
    border-bottom: none;
}
.account-menu-item:hover,
.account-menu-item:focus {
    background: #f4f4f6;
    color: #1a1a1f;
    outline: none;
}
.account-menu-item:focus-visible {
    outline: 2px solid #c9c9d1;
    outline-offset: -2px;
    border-radius: 0;
}

@keyframes account-menu-enter {
    from {
        opacity: 0;
        transform: translateY(-3px) scale(0.995);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.account-menu-item i[data-lucide],
.account-menu-item svg.lucide {
    width: 18px;
    height: 18px;
    color: #666;
    flex-shrink: 0;
}
.account-menu-item > span:first-of-type { flex: 1; }
.account-menu-divider {
    height: 1px;
    background: #ececef;
    margin: 6px 4px;
}
.account-menu-item:hover i[data-lucide],
.account-menu-item:focus i[data-lucide],
.account-menu-item:hover svg.lucide,
.account-menu-item:focus svg.lucide {
    color: #333;
}

/* ── Mobile-only elements: never rendered on desktop ── */
.mobile-menu-btn,
.mobile-menu,
.home-mobile-actions,
.drop-zone-pct {
    display: none;
}

/* Mobile adjustments for account menu */
@media (max-width: 768px) {
    .account-menu {
        right: 0;
        left: auto;
        max-width: calc(100vw - 32px);
        min-width: 180px;
    }
    .account-menu-trigger {
        padding: 6px 10px 6px 6px;
    }
    .account-menu-avatar-img {
        width: 22px;
        height: 22px;
    }
    .account-menu-username {
        max-width: 140px !important;
    }

    /* ── QuickShare: let joined-peer avatars wrap instead of overflowing the screen ── */
    .people-row {
        flex-wrap: wrap;
    }

    /* ── Bigger tap targets for the small file-row action icons ── */
    .file-entry-right svg {
        padding: 8px;
        margin: -8px;
        box-sizing: content-box;
    }

    .file-entry-right .recent-action {
        padding: 8px;
        margin: -8px;
    }
}

/* ── Footer ── */
.footer {
    background-color: #E5E5E5;
    padding: 14px 40px;
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.footer a {
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    text-decoration: underline;
}

.footer a:hover {
    opacity: 0.7;
}

/* ── Main content (base) ── */
.main-content {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ── File list / entries (shared) ── */
.file-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.file-entry {
    position: relative;
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 76px;
    min-height: 76px;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.progress-circle {
    display: inline-block;
    vertical-align: middle;
}

.file-download-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: #E4E3E3;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    z-index: 1;
}

.file-download-progress-bar {
    height: 100%;
    width: 0%;
    background: #007AFF;
    border-radius: 0;
    transition: width 0.2s ease;
}

.file-entry-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.file-name {
    font-family: 'Arimo', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-info {
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #595959;
    white-space: nowrap;
}

.file-entry-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.file-entry-right svg {
    width: 18px;
    height: 18px;
    color: #000000;
    cursor: pointer;
}

.file-entry-right svg:hover {
    opacity: 0.6;
}

.file-entry-right .recent-action {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    display: inline-flex;
    color: #000;
}

.file-entry-right .recent-action:disabled svg {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Drop zone (shared) ── */
.drop-zone {
    width: 562px;
    height: 242px;
    background-color: #D9D9D9;
    border: 3px dashed #8F8F8F;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.drop-zone.drag-over {
    background-color: #7a7a7a;
}

.drop-zone-main-text {
    font-family: 'Arimo', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #000000;
}

.drop-zone-sub-text {
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #828282;
    margin-top: 8px;
    min-height: 20px;
}

.drop-zone input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    top: 0;
    left: 0;
}

.drop-zone-mobile,
.drop-zone-mobile-icon {
    display: none;
}

/* ── Buttons (quickshare) ── */
.start-btn,
.blue-btn {
    width: 117px;
    height: 38px;
    background-color: #007AFF;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.start-btn:hover,
.blue-btn:hover {
    opacity: 0.9;
}

.blue-btn.disabled {
    background-color: #ACACAC;
    cursor: default;
    pointer-events: none;
}

/* ── Code squares (quickshare) ── */
.code-squares {
    display: flex;
    gap: 14px;
    margin-top: 36px;
}

.code-square {
    width: 55px;
    height: 55px;
    background-color: #D9D9D9;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Arimo', sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: #000000;
}

/* ── People section (quickshare) ── */
.people-heading {
    font-family: 'Arimo', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #000000;
    margin-top: 44px;
}

.people-row {
    display: flex;
    gap: 24px;
    margin-top: 20px;
}

.person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.person-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0px 0px 13.4px 4px rgba(142, 142, 142, 0.15);
}

.person-circle svg {
    width: 30px;
    height: 30px;
    color: #000000;
    stroke: currentColor;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.person-name {
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
}

.person-circle {
    overflow: hidden;
}

.person-guest-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-name {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person.is-self .person-circle {
    outline: 3px solid #007AFF;
    outline-offset: 3px;
}

/* Avatars fill the circle whatever size it has on this screen. */
.person-circle > img,
.person-circle > span:not(.person-guest-icon) {
    width: 100% !important;
    height: 100% !important;
}

.person.pending .person-circle {
    background-color: #E5E5EA;
    box-shadow: none;
}

.person.pending .person-circle > * {
    filter: grayscale(1);
    opacity: 0.4;
}

.person.pending .person-name {
    color: #8E8E93;
}

/* Quick share: host approves joiners, comparing key fingerprints */
.approval-requests {
    margin-top: 24px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 520px;
}

.approval-requests.hidden {
    display: none;
}

.approval-hint {
    font-family: 'Arimo', sans-serif;
    font-size: 14px;
    color: #555555;
    margin: 0;
}

.approval-request {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background-color: #F2F2F2;
}

.approval-request-who {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.approval-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #D9D9D9;
    overflow: hidden;
}

.approval-avatar .person-guest-icon svg {
    width: 18px;
    height: 18px;
}

.approval-request-name {
    font-family: 'Arimo', sans-serif;
    font-size: 16px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.approval-request-actions {
    display: flex;
    gap: 8px;
}

.approval-request-actions button {
    flex: 1;
}

.approval-fingerprint {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    letter-spacing: 0.08em;
}

.approval-request button {
    border: none;
    border-radius: 999px;
    padding: 9px 14px;
    font-family: 'Arimo', sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.approval-request .approve-btn {
    background-color: #0A84FF;
    color: #FFFFFF;
}

.approval-request .decline-btn {
    background-color: #D9D9D9;
    color: #000000;
}

/* ── Join code squares (quickshare) ── */
.join-code-squares {
    display: flex;
    gap: 14px;
    margin-top: 36px;
    position: relative;
    cursor: text;
}

.join-code-hidden-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    caret-color: transparent;
    font-size: 36px;
    letter-spacing: 53px;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background: transparent;
    z-index: 2;
}

.join-code-square {
    width: 55px;
    height: 55px;
    background-color: #D9D9D9;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Arimo', sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: #8E8E8E;
    user-select: none;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.join-code-square.filled {
    color: #000000;
}

.join-code-squares.focused .join-code-square.focused {
    border-color: #007AFF;
}

/* ── Utility ── */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════
   PAGE: index.html
   ═══════════════════════════════════════════ */

/* ── Index page: flat header (no pill bar) ── */
body.page-index .header-wrapper {
    position: static;
    padding: 44px 76px 0;
    justify-content: flex-start;
}

body.page-index .header {
    background: none;
    border-radius: 0;
    width: 100%;
    min-width: auto;
    padding: 0;
    backdrop-filter: none;
    position: relative;
}

body.page-index .header-left {
    gap: 32px;
}

body.page-index .logo-text {
    font-size: 28px;
}

body.page-index .recent-files-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

body.page-index .login-btn {
    margin-left: auto;
}

/* ── Star background decoration ── */
body.page-index .star-bg {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: #F5F5F7;
}

body.page-index .star-reveal {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F5F5F7;
}

body.page-index .star-reveal svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Header: Recent files link ── */
.recent-files-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    border: 1px solid #595959;
    border-radius: 34px;
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    text-decoration: none;
    background: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.recent-files-link:hover {
    opacity: 0.7;
}

/* ── Hero Section ── */
body.page-index .hero-section {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 60px;
}

body.page-index .hero-title {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 800;
    font-size: 64px;
    color: #000000;
    margin-bottom: 16px;
    line-height: 1.1;
}

body.page-index .hero-highlight {
    color: #00AE71;
}

body.page-index .hero-subtitle {
    font-family: 'Arimo', sans-serif;
    font-weight: 510;
    font-size: 24px;
    color: #000000;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.4;
}

/* ── Action Cards ── */
body.page-index .action-cards {
    display: flex;
    justify-content: center;
    gap: clamp(32px, 4vw, 68px);
    padding: 30px clamp(20px, 2.5vw, 40px) 60px;
    margin-top: auto;
}

body.page-index .action-card {
    width: clamp(280px, 22vw, 500px);
    aspect-ratio: 385 / 270;
    background: #FFFFFF;
    border-radius: 27px;
    padding: clamp(24px, 2.2vw, 38px) clamp(20px, 2.2vw, 38px) clamp(20px, 1.8vw, 31px) clamp(20px, 2.2vw, 38px);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

body.page-index .card-title {
    font-family: 'Arimo', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.4vw, 28px);
    color: #000000;
    margin: 0 0 30px 0;
}

body.page-index .card-desc {
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 0.9vw, 19px);
    color: #6E6E73;
    line-height: 1.4;
    margin: 0 0 18px 0;
}

body.page-index .card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(44px, 3vw, 58px);
    border-radius: 15px;
    font-family: 'Arimo', sans-serif;
    font-weight: 510;
    font-size: clamp(16px, 1.1vw, 22px);
    text-decoration: none;
    transition: opacity 0.2s ease, background 0.2s ease;
    margin-top: auto;
}

body.page-index .card-btn-primary {
    background: #00827B;
    color: #FFFFFF;
    border: none;
}

body.page-index .card-btn-primary:hover {
    opacity: 0.9;
}

body.page-index .card-btn-outline {
    background: transparent;
    color: #000000;
    border: 2px solid #00827B;
}

body.page-index .card-btn-outline:hover {
    background: rgba(0, 130, 123, 0.05);
}

body.page-index .action-card-quickshare {
    cursor: pointer;
    position: relative;
}

body.page-index .action-card-quickshare .card-desc,
body.page-index .action-card-quickshare .card-btn-quickshare {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

body.page-index .action-card-quickshare.expanded .card-desc,
body.page-index .action-card-quickshare.expanded .card-btn-quickshare {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    height: 0;
    margin: 0 0 18px 0;
    margin-top: auto;
    overflow: hidden;
}

body.page-index .quick-share-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: absolute;
    left: clamp(20px, 2.2vw, 38px);
    right: clamp(20px, 2.2vw, 38px);
    bottom: clamp(20px, 1.8vw, 31px);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

body.page-index .quick-share-actions .card-btn {
    opacity: 0;
    transform: translateY(10px);
    margin-top: 0;
}

body.page-index .quick-share-actions .card-btn:first-child {
    transition: opacity 0.25s ease 0.1s, transform 0.25s ease 0.1s;
}

body.page-index .quick-share-actions .card-btn:last-child {
    transition: opacity 0.25s ease 0.18s, transform 0.25s ease 0.18s;
}

body.page-index .action-card-quickshare.expanded .quick-share-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

body.page-index .action-card-quickshare.expanded .quick-share-actions .card-btn {
    opacity: 1;
    transform: translateY(0);
}

body.page-index .file-section {
    margin-top: 80px;
    padding-left: 140px;
    padding-right: 60px;
    max-width: 700px;
}

body.page-index .file-section h2 {
    font-family: 'Arimo', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #000000;
    margin-bottom: 16px;
    text-align: left;
}

body.page-index .file-entry {
    background-color: #f2f2f2;
}

body.page-index .file-entry:hover {
    opacity: 1 !important;
}

body.page-index .file-entry.is-locked {
    background-color: #D9D9D9 !important;
    border: 2px dashed #FF7878 !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

body.page-index .file-entry.is-locked .file-entry-left,
body.page-index .file-entry.is-locked .file-entry-right {
    pointer-events: none;
}

body.page-index .file-entry.is-locked .recent-action {
    cursor: not-allowed;
}

body.page-index .file-entry.is-locked:hover {
    opacity: 1 !important;
    background-color: #D9D9D9 !important;
}

body.page-index .file-entry.is-locked .file-entry-right .recent-action:disabled svg {
    opacity: 0.5;
}

body.page-index .footer {
    margin-top: auto;
}

/* ═══════════════════════════════════════════
   PAGE: link.html
   ═══════════════════════════════════════════ */

body.page-link .main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.page-link .drop-zone-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-link .footer {
    margin-top: auto;
}

/* ═══════════════════════════════════════════
   PAGE: quickshare.html
   ═══════════════════════════════════════════ */

body.page-quickshare .main-content {
    position: relative;
}

body.page-quickshare .page-loading,
body.page-quickshare .page-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 45vh;
    gap: 18px;
}

body.page-quickshare .page-loading .downloading-spinner {
    width: 44px;
    height: 44px;
}

body.page-quickshare .page-loading-text,
body.page-quickshare .page-error-text {
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #6E6E73;
    margin: 0;
    text-align: center;
}

body.page-quickshare .create-view {
    display: none;
    padding: 60px 140px 0 140px;
}

body.page-quickshare .create-view.active {
    display: block;
}

body.page-quickshare .create-view h1 {
    font-family: 'Arimo', sans-serif;
    font-weight: 600;
    font-size: 32px;
    color: #000000;
    text-align: left;
}

body.page-quickshare .create-view .subtitle {
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    text-align: left;
    margin-top: 12px;
    max-width: 620px;
    line-height: 1.4;
}

body.page-quickshare .bottom-bar {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 140px;
}

body.page-quickshare .session-view {
    display: none;
    padding: 60px 140px 0 140px;
}

body.page-quickshare .session-view.active {
    display: flex;
    gap: 60px;
}

body.page-quickshare .session-left {
    flex: 0 0 auto;
    min-width: 280px;
}

body.page-quickshare .session-left h2 {
    font-family: 'Arimo', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #000000;
    margin-bottom: 16px;
}

body.page-quickshare .file-entry {
    background-color: #D7D7D7;
}

body.page-quickshare .session-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

body.page-quickshare .session-bottom-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

body.page-quickshare .connected-text {
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #828282;
}

body.page-quickshare .join-view {
    display: none;
    padding: 60px 140px 0 140px;
}

body.page-quickshare .join-view.active {
    display: block;
}

body.page-quickshare .join-view h1 {
    font-family: 'Arimo', sans-serif;
    font-weight: 600;
    font-size: 32px;
    color: #000000;
    text-align: left;
}

body.page-quickshare .join-view .subtitle {
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    text-align: left;
    margin-top: 12px;
    max-width: 620px;
    line-height: 1.4;
}

body.page-quickshare .join-bottom-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 140px;
    margin-top: 40px;
}

body.page-quickshare .queue-view,
body.page-quickshare .declined-view {
    display: none;
    padding: 60px 140px 0 140px;
}

body.page-quickshare .queue-view.active {
    display: block;
}

body.page-quickshare .queue-view h1,
body.page-quickshare .declined-view h1 {
    font-family: 'Arimo', sans-serif;
    font-weight: 600;
    font-size: 32px;
    color: #000000;
    text-align: left;
}

body.page-quickshare .queue-view .subtitle,
body.page-quickshare .declined-view .subtitle {
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    text-align: left;
    margin-top: 12px;
    max-width: 620px;
    line-height: 1.4;
}

body.page-quickshare .session-view.active ~ .queue-view {
    display: none !important;
}

body.page-quickshare .footer {
    margin-top: 100px;
}

/* ═══════════════════════════════════════════
   FUNCTIONAL STYLES (modals, banners, forms)
   ═══════════════════════════════════════════ */

:root {
    --accent: #007AFF;
    --border: #262626;
    --bg: #0d0d0d;
    --surface: #161616;
    --color-text: #efefef;
    --color-text-muted: #888;
}

body.page-link,
body.page-shared {
    font-family: 'Arimo', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #F5F5F7;
}

body.page-shared .header-wrapper {
    padding-top: 27px;
    padding-bottom: 5px;
}

body.page-shared .header {
    width: max-content;
    min-width: min(626px, 90%);
    max-width: none;
}

body.page-shared .logo-text {
    font-size: 28px;
}

body.page-shared .login-btn {
    padding: 12px 32px;
    border-radius: 34px;
}

body.page-shared .shared-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

body.page-shared .shared-heading {
    text-align: center;
    color: black;
    font-size: 24px;
    font-family: 'Arimo', sans-serif;
    font-weight: 590;
    margin-bottom: 30px;
}

body.page-shared .file-info-box {
    width: 540px;
    max-width: 100%;
    background: #D9D9D9;
    border-radius: 21px;
    padding: 23px 23px 20px;
    margin-bottom: 12px;
}

body.page-shared .download-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .2s, background-color .2s;
}
body.page-shared .download-card.active { border: 3px solid #00AE71; padding: 20px; }
body.page-shared .download-card.done { border: 3px solid #00AE71; background: #D6F3E8; padding: 20px; }
body.page-shared .download-card.error { border: 3px solid #D9776D; background: #F7DAD6; padding: 20px; }
@keyframes download-card-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
body.page-shared .download-card.error { animation: download-card-shake .4s; }
body.page-shared .download-card-top { display: flex; align-items: center; gap: 12px; }
body.page-shared .download-file-icon {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; background: #fff;
    display: flex; align-items: center; justify-content: center; color: #595959;
}
body.page-shared .download-file-icon svg { width: 20px; height: 20px; }
body.page-shared .download-file-info { min-width: 0; flex: 1; }
body.page-shared .download-file-info .file-meta-text { margin-bottom: 0; }
body.page-shared .download-card-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
body.page-shared .download-percent { color: #00814F; font-size: 13px; font-weight: 700; min-width: 34px; text-align: right; }
body.page-shared .download-bar-track { display: none; height: 6px; margin-top: 4px; border-radius: 4px; background: #fff; overflow: hidden; }
body.page-shared .download-card.active .download-bar-track { display: block; }
body.page-shared .download-bar-fill { height: 100%; width: 0; border-radius: 4px; background: #00AE71; transition: width .2s ease; }
body.page-shared .download-status-row { display: flex; align-items: center; gap: 6px; color: #595959; font-size: 12px; }
body.page-shared .download-status-row svg { width: 14px; height: 14px; }
body.page-shared .download-card.done .download-status-row { color: #00814F; }
body.page-shared .download-card.error .download-status-row { color: #B3261E; }
.drop-zone-progress-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.drop-zone-progress-row .drop-zone-progress { flex: 1; }
.drop-zone-eta { min-width: 110px; color: #595959; font-size: 12px; white-space: nowrap; text-align: right; }

body.page-shared .file-name-text {
    color: black;
    font-size: 24px;
    font-family: 'Arimo', sans-serif;
    font-weight: 510;
    word-break: break-all;
    margin-bottom: 2px;
}

body.page-shared .file-meta-text {
    color: #595959;
    font-size: 14px;
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    margin-bottom: 14px;
}

body.page-shared .download-btn {
    display: block;
    width: 100%;
    background: #007AFF;
    color: white;
    font-size: 16px;
    font-family: 'Arimo', sans-serif;
    font-weight: 510;
    border: none;
    border-radius: 10px;
    padding: 10px 0;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

body.page-shared .download-btn:hover {
    opacity: 0.9;
}

body.page-shared #auto-decrypt-section {
    margin-top: 8px;
}

body.page-shared #no-password-section {
    margin-top: 8px;
}

body.page-shared .no-password-btn {
    display: block;
    width: 100%;
    background: #D9D9D9;
    color: #000;
    font-size: 14px;
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    border: none;
    border-radius: 10px;
    padding: 10px 0;
    text-align: center;
}

body.page-shared .password-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

body.page-shared .password-input-row input {
    flex: 1;
    padding: 10px 14px;
    font-size: 14px;
    font-family: 'Arimo', sans-serif;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    color: #000;
    outline: none;
}

body.page-shared .password-input-row input:focus {
    border-color: #007AFF;
}

body.page-shared .password-input-row .download-btn {
    width: auto;
    padding: 10px 24px;
    white-space: nowrap;
}

body.page-shared .hint {
    color: #8E8E8E;
    font-size: 12px;
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    margin-top: 6px;
}

body.page-shared .warning-text {
    text-align: center;
    color: #8E8E8E;
    font-size: 13px;
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    margin-bottom: 6px;
}

body.page-shared .report-link {
    display: block;
    margin: 0 auto;
    background: none;
    border: none;
    text-align: center;
    color: #8E8E8E;
    font-size: 14px;
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

body.page-shared .report-link:hover {
    opacity: 0.7;
}

body.page-shared .loading-box {
    background-color: #fff;
    border-radius: 21px;
    padding: 2rem;
    text-align: center;
}

body.page-shared .loading-box p {
    margin-top: 1rem;
    color: #888;
}

body.page-shared #error-section {
    width: 736px;
    max-width: 100%;
    height: 544px;
    max-height: calc(100vh - 200px);
    background: #F5F5F7;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 0 auto;
}

body.page-shared #error-section #error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}

body.page-shared .spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #E4E3E3;
    border-top-color: #007AFF;
    border-radius: 50%;
    animation: spinner-rotate 1s linear infinite;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

body.page-shared .downloading-box {
    width: 415px;
    height: 188px;
    max-width: 100%;
    background: #D9D9D9;
    border-radius: 21px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
}

body.page-shared .downloading-title {
    color: #000;
    font-size: 24px;
    font-weight: 510;
}

.downloading-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid #007AFF;
    border-top-color: transparent;
    animation: downloading-spin 0.8s linear infinite;
}

@keyframes downloading-spin {
    to { transform: rotate(360deg); }
}

body.page-shared .downloading-percent {
    color: #828282;
    font-size: 16px;
    font-weight: 400;
}

body.page-shared .page-shared-footer {
    margin-top: auto;
}

/* ── TOS Overlay ── */
.tos-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease;
}

.tos-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.tos-modal {
    width: min(451px, calc(100% - 2rem));
    background: #F5F5F7;
    border-radius: 20px;
    padding: 24px 24px 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}

.tos-modal-closable {
    position: relative;
}

.tos-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #595959;
    cursor: pointer;
}

.tos-modal-close:hover,
.tos-modal-close:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: #000;
}

.tos-modal h2 {
    margin: 0 0 16px 0;
    font-size: 24px;
    font-weight: 590;
    color: #000;
}

.tos-modal-description {
    margin: 0 0 28px 0;
    font-size: 16px;
    color: #000;
    line-height: 1.5;
}

.tos-modal-description a {
    color: #000;
    text-decoration: underline;
}

.tos-modal-actions {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.tos-modal-actions .btn {
    min-width: 117px;
    height: 38px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tos-modal-actions .btn-secondary {
    background: #C7C7C7;
    border: none;
    color: #000;
}

.tos-modal-actions .btn-secondary:hover:not(:disabled) {
    background: #b5b5b5;
}

body.tos-gate-open {
    overflow: hidden;
}

.action-tone-warning .tos-modal .btn-accent {
    background: #FF3B30;
}

.action-tone-warning .tos-modal .btn-accent:hover:not(:disabled) {
    opacity: 0.9;
}
.tos-overlay.is-busy {
    opacity: 0.86;

}

/* ── Share URL card (link share) ── */
.share-url-card {
    width: min(480px, calc(100% - 2rem));
    max-height: calc(100vh - 2rem);
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    position: relative;
    transform: scale(0.9) translateY(8px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.tos-overlay.visible .share-url-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.share-url-title {
    margin: 0 0 8px 0;
    font-size: 32px;
    font-weight: 590;
    color: #000;
    line-height: 1.2;
}

.share-url-text {
    margin: 0 0 28px 0;
    font-size: 20px;
    font-weight: 400;
    color: #000;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-url-actions {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    align-items: center;
}

.btn-share-discard,
.btn-share-copy,
.btn-share-native {
    min-width: 117px;
    height: 38px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    font-family: inherit;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
    line-height: 1;
}

.btn-share-discard {
    background: #C7C7C7;
    color: #000;
}

.btn-share-discard:hover {
    opacity: 0.8;
}

.btn-share-copy {
    background: #007AFF;
    color: #FFFFFF;
}

.btn-share-copy:hover {
    opacity: 0.85;
}

.btn-share-native {
    background: transparent;
    border: 2px solid #007AFF;
    color: #007AFF;
}

.btn-share-native:hover {
    background: rgba(0, 122, 255, 0.08);
}

@media (max-width: 640px) {
    .share-url-card {
        padding: 16px 12px;
    }

    .share-url-title {
        font-size: 24px;
    }

    .share-url-text {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .share-url-actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-end;
    }

    .btn-share-discard,
    .btn-share-copy,
    .btn-share-native {
        width: auto;
    }
}

/* ── Browser Old Nudge ── */
.browser-old-nudge {
    background: #681111;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 14px;
    font-family: 'Arimo', sans-serif;
    line-height: 1.5;
}

/* ── Toasts (toast.js) ── */
.toast-stack {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 6000;
    width: min(420px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    --toast-accent: #0A84FF;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 8px 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    pointer-events: auto;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    animation: toast-in 0.5s cubic-bezier(0.2, 1.3, 0.35, 1) backwards;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s;
}

.toast.is-dragging {
    transition: none;
    cursor: grabbing;
}

.toast-success { --toast-accent: #34C759; }
.toast-error { --toast-accent: #FF3B30; }

.toast-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--toast-accent);
}

.toast-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding-top: 1px;
}

.toast-text {
    font-family: 'Arimo', sans-serif;
    font-size: 15px;
    line-height: 1.35;
    color: #111111;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.toast-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: #6E6E73;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    padding: 1px 6px;
    user-select: all;
    -webkit-user-select: all;
}

.toast-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px 0 -4px 2px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8E8E93;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.toast-close:hover,
.toast-close:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: #111111;
    outline: none;
}

.toast-timer {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--toast-accent);
    opacity: 0.35;
    transform-origin: left;
}

.toast.is-paused .toast-timer {
    animation-play-state: paused !important;
}

.toast.is-bumped {
    animation: toast-bump 0.35s cubic-bezier(0.2, 1.3, 0.35, 1);
}

.toast.is-leaving {
    pointer-events: none;
    animation: toast-out-up 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.toast.is-leaving.leave-left { animation-name: toast-out-left; }
.toast.is-leaving.leave-right { animation-name: toast-out-right; }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-28px) scale(0.92); }
}

@keyframes toast-bump {
    40% { transform: scale(1.03); }
}

@keyframes toast-timer {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@keyframes toast-out-up {
    55% { opacity: 0; transform: translateY(-24px) scale(0.94); max-height: var(--toast-h); }
    100% { opacity: 0; transform: translateY(-24px) scale(0.94); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; border-width: 0; }
}

@keyframes toast-out-left {
    55% { opacity: 0; transform: translateX(-110%); max-height: var(--toast-h); }
    100% { opacity: 0; transform: translateX(-110%); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; border-width: 0; }
}

@keyframes toast-out-right {
    55% { opacity: 0; transform: translateX(110%); max-height: var(--toast-h); }
    100% { opacity: 0; transform: translateX(110%); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; border-width: 0; }
}

@media (max-width: 768px) {
    .toast-stack {
        top: calc(8px + env(safe-area-inset-top, 0px));
        width: calc(100vw - 16px);
    }

    .toast {
        padding: 13px 8px 13px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast,
    .toast.is-bumped {
        animation: toast-fade 0.2s ease-out backwards;
    }

    .toast.is-leaving,
    .toast.is-leaving.leave-left,
    .toast.is-leaving.leave-right {
        animation: toast-fade 0.2s ease-in reverse forwards;
    }

    .toast-timer {
        display: none;
    }
}

@keyframes toast-fade {
    from { opacity: 0; }
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: 'Arimo', sans-serif;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-accent {
    background: #007AFF;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-accent:hover:not(:disabled) {
    opacity: 0.9;
}

.btn-accent:disabled {
    background: #262626;
    color: #555;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: #E4E3E3;
    color: #000;
    border: 1px solid #ccc;
    transition: background-color 0.2s ease;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #d4d3d3;
}

.btn-large {
    width: 100%;
    padding: 1.25rem 1rem;
    font-size: 0.875rem;
}

.btn-icon {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.btn-icon:hover {
    transform: scale(1.1);
}

.copy-trigger {
    padding: 1rem;
    border-left: 1px solid var(--border);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-trigger:hover {
    background-color: #007AFF;
    color: #fff;
}

/* ── Link Page: Upload Flow ── */

body.page-link .link-content-wrapper {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 200px);
}

body.page-link .form-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1rem;
    flex: 1;
}

body.page-link .drop-zone {
    border: 3px dashed #8F8F8F;
    border-radius: 12px;
    background: #D9D9D9;
    transition: all 0.4s ease;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    max-width: 562px;
    height: 242px;
    margin: 0 auto;
}

body.page-link .drop-zone:hover,
body.page-link .drop-zone.active {
    border-color: #9a9a9a;
    background: #c8c8c8;
}

body.page-link .drop-zone-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    color: #555;
    transition: color 0.3s ease;
}

body.page-link .drop-zone:hover .drop-zone-icon,
body.page-link .drop-zone.active .drop-zone-icon {
    color: #000;
}

body.page-link .drop-zone h3 { 
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #000;
}

body.page-link .drop-zone p {
    font-size: 0.75rem;
    color: #555;
}

body.page-link .drop-zone.uploading {
    opacity: 1;
    pointer-events: none;
}

body.page-link .drop-zone.success {
    opacity: 1;
    pointer-events: auto;
}

body.page-link .drop-zone.success .drop-zone-icon {
    color: #007AFF;
}

body.page-link .drop-zone.success .drop-zone-icon {
    color: #007aff;
}

body.page-link .drop-zone.success {
    color: #007aff;
}

@keyframes drop-zone-pulse-ring {
    from { transform: scale(.8); opacity: .7; }
    to { transform: scale(1.55); opacity: 0; }
}

@keyframes drop-zone-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

@keyframes drop-zone-bar-sweep {
    from { transform: translateX(-100%); }
    to { transform: translateX(400%); }
}

body.page-link .drop-zone {
    min-height: 150px;
    height: auto;
    flex: 0 0 auto;
    background: #FAFAFA;
    border: 2px dashed #C8C8C8;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    transition: border-color .25s, background .25s, transform .15s;
}

body.page-link .drop-zone:hover,
body.page-link .drop-zone.active {
    border-color: #00AE71;
    background: #E9FBF3;
    transform: scale(1.01);
}

body.page-link .drop-zone-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-link .drop-zone-ring {
    display: none;
    position: absolute;
    inset: 0;
    border: 2px solid #00AE71;
    border-radius: 50%;
}

body.page-link .drop-zone.dragging .drop-zone-ring,
body.page-link .drop-zone.uploading .drop-zone-ring {
    display: block;
    animation: drop-zone-pulse-ring 1.6s ease-out infinite;
}

body.page-link .drop-zone.dragging .drop-zone-ring:nth-child(2),
body.page-link .drop-zone.uploading .drop-zone-ring:nth-child(2) {
    animation-delay: .5s;
}

body.page-link .drop-zone-icon {
    width: 32px;
    height: 32px;
    margin: 0;
    color: #00AE71;
    transition: color .25s;
}

body.page-link .drop-zone.uploading .drop-zone-icon {
    animation: spin 1.1s linear infinite;
}

body.page-link .drop-zone.error {
    border-color: #E48178;
    background: #FDECEA;
    animation: drop-zone-shake .5s;
}

body.page-link .drop-zone.error .drop-zone-icon {
    color: #B3261E;
    animation: none;
}

body.page-link .drop-zone.warning {
    border-color: #E6B45C;
    background: #FDF3E1;
}

body.page-link .drop-zone.warning .drop-zone-icon {
    color: #B57A00;
    animation: drop-zone-warning-float 2.4s ease-in-out infinite;
}

body.page-link .drop-zone.success {
    border-color: #00AE71;
    background: #E9FBF3;
}

body.page-link .drop-zone.success .drop-zone-icon {
    color: #00AE71;
}

body.page-link .drop-zone-progress {
    display: none;
    width: min(280px, 100%);
    height: 6px;
    margin: 16px auto 0;
    border-radius: 4px;
    background: #E0E0E0;
    overflow: hidden;
    position: relative;
}

body.page-link .drop-zone.uploading .drop-zone-progress {
    display: block;
}

body.page-link .drop-zone-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 4px;
    background: #00AE71;
    transition: width .4s ease;
}

body.page-link .drop-zone-progress-shimmer {
    position: absolute;
    inset: 0 auto 0 0;
    width: 25%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    animation: drop-zone-bar-sweep 1.2s linear infinite;
}

body.page-link .drop-zone-badge {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 500;
}

body.page-link .drop-zone.success .drop-zone-badge,
body.page-link .drop-zone.error .drop-zone-badge,
body.page-link .drop-zone.warning .drop-zone-badge {
    display: inline-flex;
}

body.page-link .drop-zone.success .drop-zone-badge {
    background: #DFF7E8;
    color: #00814F;
}

body.page-link .drop-zone.error .drop-zone-badge {
    background: #FBDFDD;
    color: #B3261E;
}

body.page-link .drop-zone.warning .drop-zone-badge {
    background: #FDECC8;
    color: #8A5300;
}

@keyframes drop-zone-warning-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

body.page-quickshare .session-right .drop-zone {
    min-height: 242px;
    height: auto;
    background: #FAFAFA;
    border: 2px dashed #C8C8C8;
    border-radius: 16px;
    transition: border-color .25s, background .25s, transform .15s;
}

body.page-quickshare .session-right .drop-zone:hover,
body.page-quickshare .session-right .drop-zone.active {
    border-color: #00AE71;
    background: #E9FBF3;
    transform: scale(1.01);
}

body.page-quickshare .session-right .drop-zone-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-quickshare .session-right .drop-zone-ring {
    display: none;
    position: absolute;
    inset: 0;
    border: 2px solid #00AE71;
    border-radius: 50%;
}

body.page-quickshare .session-right .drop-zone.active .drop-zone-ring {
    display: block;
    animation: drop-zone-pulse-ring 1.6s ease-out infinite;
}

body.page-quickshare .session-right .drop-zone.active .drop-zone-ring:nth-child(2) {
    animation-delay: .5s;
}

body.page-quickshare .session-right .drop-zone-icon {
    width: 32px;
    height: 32px;
    color: #00AE71;
}

body.page-quickshare .session-right .drop-zone.uploading .drop-zone-icon {
    animation: spin 1.1s linear infinite;
}

body.page-quickshare .session-right .drop-zone.warning .drop-zone-icon {
    color: #B57A00;
    animation: drop-zone-warning-float 2.4s ease-in-out infinite;
}

body.page-link #file-details {
    animation: slideInRight 0.3s ease;
}

/* ── Upload Success: Exact Spec Design ── */
/* Success stage with rings, sparks, and animated checkmark */

body.page-link .main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px 64px;
}

body.page-link .link-content-wrapper {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Stage visibility */
body.page-link .form-section {
    width: 100%;
    align-items: center;
}

/* Success stage */
body.page-link .success-stage {
    position: relative;
    width: 76px;
    height: 76px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-link .success-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #79FFA1;
    opacity: 0;
    animation: ringPulse 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s forwards;
}

@keyframes ringPulse {
    0%   { opacity: 0.7; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(1.9); }
}

body.page-link .success-mark {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #E6FBEE;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    animation: markPop 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) 0.05s forwards;
}

@keyframes markPop {
    to { opacity: 1; transform: scale(1); }
}

body.page-link .success-mark svg {
    width: 34px;
    height: 34px;
}

body.page-link .success-mark svg path {
    stroke: #00827B;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: drawCheck 0.45s ease 0.35s forwards;
}

@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}

/* Drifting particles */
body.page-link .spark {
    position: absolute;
    border-radius: 50%;
    background: #79FFA1;
    opacity: 0;
    animation: sparkFly 0.7s cubic-bezier(0.15, 0.6, 0.3, 1) 0.3s forwards;
}

body.page-link .spark:nth-child(1) { width: 6px; height: 6px; top: 50%; left: 50%; --tx: -46px; --ty: -34px; animation-delay: 0.30s; }
body.page-link .spark:nth-child(2) { width: 5px; height: 5px; top: 50%; left: 50%; --tx: 42px; --ty: -38px; background: #007AFF; animation-delay: 0.34s; }
body.page-link .spark:nth-child(3) { width: 4px; height: 4px; top: 50%; left: 50%; --tx: 50px; --ty: 20px; animation-delay: 0.38s; }
body.page-link .spark:nth-child(4) { width: 5px; height: 5px; top: 50%; left: 50%; --tx: -50px; --ty: 26px; background: #007AFF; animation-delay: 0.42s; }
body.page-link .spark:nth-child(5) { width: 4px; height: 4px; top: 50%; left: 50%; --tx: 6px; --ty: -54px; animation-delay: 0.46s; }

@keyframes sparkFly {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); }
}

/* Headline & subhead */
body.page-link .headline {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 800;
    font-size: 30px;
    color: #000000;
    text-align: center;
    letter-spacing: -0.01em;
    opacity: 0;
    animation: riseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
    margin: 0;
}

body.page-link .subhead {
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #595959;
    text-align: center;
    margin-top: 8px;
    opacity: 0;
    animation: riseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.22s forwards;
}

@keyframes riseIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Card stack */
body.page-link .card {
    width: 100%;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(10px);
    animation: riseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

body.page-link .card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

body.page-link .card:nth-of-type(1) { animation-delay: 0.30s; }
body.page-link .card:nth-of-type(2) { animation-delay: 0.38s; }
body.page-link .card:nth-of-type(3) { animation-delay: 0.46s; }
body.page-link .card:nth-of-type(4) { animation-delay: 0.54s; }

/* File metadata row */
body.page-link .file-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

body.page-link .file-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #F0F4FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-link .file-icon svg { width: 20px; height: 20px; color: #007AFF; }

body.page-link .file-meta { min-width: 0; flex: 1; }

body.page-link .file-meta-name {
    font-family: 'Arimo', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-link .file-meta-sub {
    font-family: 'Arimo', sans-serif;
    font-weight: 400;
    font-size: 12.5px;
    color: #7A7A7A;
    margin-top: 2px;
}

body.page-link .file-meta-sub .dot { margin: 0 6px; opacity: 0.6; }

body.page-link .expiry-pill {
    flex-shrink: 0;
    font-family: 'Arimo', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #00827B;
    background: #E6FBEE;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Share link card */
body.page-link .card-label {
    font-family: 'Arimo', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #000000;
    margin-bottom: 10px;
}

body.page-link .link-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-link .link-field {
    flex: 1;
    min-width: 0;
    background: #F5F5F7;
    border: 1px solid #E4E3E3;
    border-radius: 10px;
    padding: 11px 14px;
    font-family: 'Arimo', sans-serif;
    font-size: 13.5px;
    color: #3C3C3C;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.3s ease, border-color 0.3s ease;
}

body.page-link .link-field.flash {
    background: #E6FBEE;
    border-color: #79FFA1;
}

body.page-link .copy-btn {
    flex-shrink: 0;
    position: relative;
    width: 92px;
    height: 40px;
    background: #007AFF;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Arimo', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease, transform 0.12s ease;
}

body.page-link .copy-btn:hover { background: #0068D6; transform: translateY(-1px); }
body.page-link .copy-btn:active { transform: translateY(0) scale(0.97); }

body.page-link .copy-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

body.page-link .copy-btn.copied { background: #00827B; }

body.page-link .copy-btn-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-link .copy-label-default,
body.page-link .copy-label-done {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

body.page-link .copy-label-done { opacity: 0; transform: translateY(6px) scale(0.9); }
body.page-link .copy-label-default { opacity: 1; transform: translateY(0) scale(1); }

body.page-link .copy-btn.copied .copy-label-default { opacity: 0; transform: translateY(-6px) scale(0.9); }
body.page-link .copy-btn.copied .copy-label-done { opacity: 1; transform: translateY(0) scale(1); }

body.page-link .copy-btn.copied .copy-label-done svg {
    animation: checkPop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) 0.05s backwards;
}

@keyframes checkPop {
    0% { transform: scale(0.4); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Send to user card */
body.page-link .send-row {
    display: flex;
    gap: 8px;
    position: relative;
}

body.page-link .user-input-wrap {
    flex: 1;
    position: relative;
}

body.page-link .user-input {
    width: 100%;
    background: #F5F5F7;
    border: 1px solid #E4E3E3;
    border-radius: 10px;
    padding: 11px 36px 11px 38px;
    font-family: 'Arimo', sans-serif;
    font-size: 13.5px;
    color: #000;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

body.page-link .user-input:focus {
    border-color: #007AFF;
    background: #fff;
}

/* Leading slot: search icon, swapped for the recipient's avatar once one is
   selected. Trailing slot: a single status icon for the current data-state
   on .user-input-wrap (searching / found / not-found). */
body.page-link .user-input-lead,
body.page-link .user-input-status {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

body.page-link .user-input-lead { left: 10px; }
body.page-link .user-input-status { right: 10px; }

body.page-link .user-input-lead-icon {
    width: 15px;
    height: 15px;
    color: #9A9A9A;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

body.page-link .user-input-lead-avatar {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 1.4, 0.4, 1);
}

body.page-link .user-input-wrap.has-avatar .user-input-lead-icon { opacity: 0; transform: scale(0.6); }
body.page-link .user-input-wrap.has-avatar .user-input-lead-avatar { opacity: 1; transform: scale(1); }

body.page-link .user-input-status-icon {
    position: absolute;
    width: 17px;
    height: 17px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}

body.page-link .user-input-status-icon.is-searching { color: #007AFF; }
body.page-link .user-input-status-icon.is-found { color: #00A36C; }
body.page-link .user-input-status-icon.is-not-found {
    display: inline-flex;
    color: #FF3B30;
    cursor: help;
}
body.page-link .user-input-status-icon.is-not-found svg { width: 100%; height: 100%; }

body.page-link .user-input-wrap[data-state="searching"] .user-input-status-icon.is-searching {
    opacity: 1;
    transform: scale(1);
    animation: spin 0.8s linear infinite;
}
body.page-link .user-input-wrap[data-state="found"] .user-input-status-icon.is-found,
body.page-link .user-input-wrap[data-state="not-found"] .user-input-status-icon.is-not-found {
    opacity: 1;
    transform: scale(1);
}
body.page-link .user-input-wrap[data-state="not-found"] .user-input-status { pointer-events: auto; }
body.page-link .user-input-wrap[data-state="found"] .user-input { border-color: #79D9A8; }
body.page-link .user-input-wrap[data-state="not-found"] .user-input { border-color: #FFB3AE; }
body.page-link .user-input:disabled { opacity: 0.6; }

/* "User not found" tooltip. Anchored to the <span> wrapper, not the lucide
   <svg>: Firefox does not render ::after generated content on SVG elements. */
body.page-link .user-input-status-icon.is-not-found::after {
    content: attr(data-tooltip);
    position: absolute;
    right: -6px;
    bottom: calc(100% + 10px);
    background: #1C1C1E;
    color: #fff;
    font-family: 'Arimo', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    max-width: 220px;
    width: max-content;
    padding: 6px 10px;
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 5;
}

body.page-link .user-input-status-icon.is-not-found:hover::after,
body.page-link .user-input-status-icon.is-not-found:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Recent recipients: avatar tiles with the username beneath */
body.page-link .recent-recipients { margin-bottom: 14px; }

body.page-link .recent-recipients-label {
    font-family: 'Arimo', sans-serif;
    font-size: 12px;
    color: #7A7A7A;
    margin-bottom: 8px;
}

body.page-link .recent-recipients-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px;
    margin: -2px;
}
body.page-link .recent-recipients-row::-webkit-scrollbar { display: none; }

body.page-link .recent-recipient {
    flex: 0 0 64px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px 6px;
    background: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    transition: background 0.15s ease, transform 0.12s ease;
}
body.page-link .recent-recipient:hover { background: #F5F5F7; }
body.page-link .recent-recipient:active { transform: scale(0.96); }
body.page-link .recent-recipient:focus-visible { outline: 2px solid #007AFF; outline-offset: 1px; }
body.page-link .recent-recipient.is-selected { background: #EAF3FF; }

body.page-link .recent-recipient-avatar {
    position: relative;
    display: flex;
    border-radius: 50%;
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow 0.15s ease;
}
body.page-link .recent-recipient.is-selected .recent-recipient-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007AFF; }

body.page-link .recent-recipient-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00A36C;
    color: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1);
}
body.page-link .recent-recipient-badge svg { width: 10px; height: 10px; }
body.page-link .recent-recipient.is-sent .recent-recipient-badge { opacity: 1; transform: scale(1); }

body.page-link .recent-recipient-name {
    max-width: 100%;
    font-family: 'Arimo', sans-serif;
    font-size: 12px;
    color: #3C3C3C;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-link .send-btn {
    flex-shrink: 0;
    width: 92px;
    height: 40px;
    background: #000000;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Arimo', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.12s ease;
}

body.page-link .send-btn:hover:not(:disabled) { opacity: 0.85; transform: translateY(-1px); }
body.page-link .send-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }
body.page-link .send-btn:disabled { opacity: 0.35; cursor: not-allowed; }

body.page-link .suggest-list {
    list-style: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 100px;
    background: #fff;
    border: 1px solid #E4E3E3;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(20,20,30,0.08);
    overflow: hidden;
    z-index: 20;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
}

body.page-link .suggest-list.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

body.page-link .suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.12s ease;
}

body.page-link .suggest-item:hover,
body.page-link .suggest-item.active { background: #F5F5F7; }

body.page-link .suggest-avatar {
    display: flex;
    flex-shrink: 0;
}

body.page-link .suggest-sent {
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: #00A36C;
    flex-shrink: 0;
}

body.page-link .suggest-name {
    font-family: 'Arimo', sans-serif;
    font-size: 13.5px;
    color: #000;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-link .sent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

body.page-link .sent-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #E6FBEE;
    color: #00827B;
    font-family: 'Arimo', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    padding: 6px 10px 6px 6px;
    border-radius: 999px;
    animation: chipIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes chipIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

body.page-link .sent-chip .chip-avatar { display: flex; }

body.page-link .sent-chip svg { width: 12px; height: 12px; }

/* Done button */
body.page-link .done-btn {
    margin-top: 24px;
    background: transparent;
    border: none;
    color: #007AFF;
    font-family: 'Arimo', sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    animation: riseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

body.page-link .done-btn:hover { opacity: 0.9 !important; }

/* Auth nudge card */
body.page-link .auth-nudge-card {
    text-align: center;
}

body.page-link .auth-nudge-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

body.page-link .auth-nudge-icon {
    width: 32px;
    height: 32px;
    color: #00AE71;
    flex-shrink: 0;
    margin-top: 2px;
}

body.page-link .auth-nudge-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

body.page-link .auth-nudge-text-wrap strong {
    font-size: 14px;
    font-weight: 600;
    color: #0A0A0A;
}

body.page-link .auth-nudge-text-wrap p {
    margin: 0;
    font-size: 13px;
    color: #4A4A4A;
    line-height: 1.5;
}

body.page-link .auth-nudge-btn {
    width: 100%;
}

/* Responsive */
@media (max-width: 620px) {
    .header { min-width: 0; width: 92%; }
    .quicklinks a:not(.login-btn) { display: none; }
    .stage { max-width: 100%; }
    .headline { font-size: 25px; }
    .suggest-list { right: 0; }
    body.page-link .send-row { flex-wrap: wrap; }
    body.page-link .send-btn { width: 100%; }
    body.page-link .suggest-list { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-delay: 0.01ms !important; }
}

/* Send button: label swaps for a spinner while a share is in flight */
body.page-link .send-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.page-link .send-btn-spinner {
    position: absolute;
    width: 17px;
    height: 17px;
    opacity: 0;
}
body.page-link .send-btn.is-loading .send-btn-label { opacity: 0; }
body.page-link .send-btn.is-loading .send-btn-spinner { opacity: 1; animation: spin 0.8s linear infinite; }
body.page-link .send-btn.is-loading:disabled { opacity: 0.85; cursor: progress; }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(1rem); }
    to { opacity: 1; transform: translateX(0); }
}

body.page-link .file-details-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid #ccc;
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
}

body.page-link .file-icon-box {
    width: 3rem;
    height: 3rem;
    background-color: #E4E3E3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

body.page-link .file-icon {
    color: #007AFF;
    width: 1.5rem;
    height: 1.5rem;
}

body.page-link .file-meta-container {
    flex: 1;
    min-width: 0;
}

body.page-link .file-name {
    font-family: 'Arimo', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: #000;
}

body.page-link .file-size {
    font-size: 0.625rem;
    color: #555;
    display: block;
    margin-top: 0.25rem;
}

body.page-link .info-text {
    font-size: 0.625rem;
    color: #888;
    font-family: 'Arimo', sans-serif;
    text-transform: uppercase;
    line-height: 1.6;
}

body.page-link .output-header {
    text-align: center;
    margin-bottom: 1rem;
}

body.page-link .success-badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    background-color: #007AFF;
    color: #fff;
    font-family: 'Arimo', sans-serif;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    border-radius: 8px;
}

body.page-link .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

body.page-link .form-label {
    font-size: 0.625rem;
    font-family: 'Arimo', sans-serif;
    color: #555;
    text-transform: uppercase;
}

body.page-link .form-input-wrapper {
    display: flex;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

body.page-link .form-input {
    flex: 1;
    background: transparent;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-family: 'Arimo', sans-serif;
    color: #000;
    border: none;
    outline: none;
}

body.page-link .form-input:disabled {
    opacity: 0.7;
}

body.page-link .form-input::placeholder {
    color: #999;
}

body.page-link .two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

body.page-link .fancy-input {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    color: #000;
    font-family: 'Arimo', sans-serif;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    text-align: center;
    outline: none;
}

body.page-link .info-box {
    border-left: 2px solid #007AFF;
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: rgba(0, 122, 255, 0.05);
    margin-top: 1rem;
    border-radius: 0 8px 8px 0;
}

body.page-link .expiration-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

body.page-link .duration-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #ccc;
    padding: 0.75rem;
    background: #fff;
    font-family: 'Arimo', sans-serif;
    font-size: 0.75rem;
    color: #333;
    cursor: pointer;
    border-radius: 8px;
}

body.page-link .duration-option input {
    accent-color: #007AFF;
}

body.page-link .duration-option:has(input:checked) {
    border-color: #007AFF;
    color: #007AFF;
    background: rgba(0, 122, 255, 0.05);
}

body.page-link .duration-locked {
    opacity: 0.45;
    cursor: default;
}

body.page-link .duration-locked input {
    pointer-events: none;
}

body.page-link .lock-hint {
    font-size: 0.65rem;
    color: #999;
}

/* ── Processing Container ── */
body.page-link .processing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    flex: 1;
}

body.page-link .spinner-container {
    display: none;
}

body.page-link .spinner-outer {
    width: 8rem;
    height: 8rem;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spin 4s linear infinite;
}

body.page-link .spinner-inner {
    width: 6rem;
    height: 6rem;
    border: 1px solid rgba(0, 122, 255, 0.3);
    border-radius: 50%;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

body.page-link .progress-text-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Arimo', sans-serif;
    color: #007AFF;
    font-size: 1.25rem;
    font-weight: 700;
}

body.page-link .progress-label {
    text-align: center;
    margin-top: 3rem;
}

body.page-link .progress-label p {
    margin: 0.5rem 0;
}

body.page-link .progress-main {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
}

body.page-link .progress-sub {
    font-family: 'Arimo', sans-serif;
    font-size: 0.625rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Quick Share: Session View ── */

body.page-quickshare .session-left .file-list .file-entry {
    background-color: #D7D7D7;
}

body.page-quickshare .session-left h2 {
    font-family: 'Arimo', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #000000;
    margin-bottom: 16px;
}

body.page-quickshare #fileListEmpty {
    color: #888;
    font-size: 0.85rem;
    padding: 1rem 0;
    text-align: center;
}

/* ── Download Activity Overlay ── */
.download-activity-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
}

.download-activity-box {
    width: 415px;
    height: 188px;
    max-width: 100%;
    background: #D9D9D9;
    border-radius: 21px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
}

.download-activity-x {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #000;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.download-activity-x:hover {
    opacity: 1;
}

.download-activity-title {
    color: #000;
    font-size: 24px;
    font-weight: 510;
}

.download-activity-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-activity-icon .downloading-spinner {
    width: 36px;
    height: 36px;
    display: block;
}

.download-activity-percent {
    color: #828282;
    font-size: 16px;
    font-weight: 400;
}

/* ── Recent Uploads ── */
.recent-uploads {
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, 0.85);
    padding: 1rem;
    border-radius: 12px;
}

.recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.recent-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recent-header h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #000;
}

.recent-count {
    color: #777;
    font-family: 'Arimo', sans-serif;
    font-size: 0.7rem;
}

.recent-search-toggle {
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    background: transparent;
    color: #000;
    cursor: pointer;
    border-radius: 8px;
}

.recent-search-toggle:hover {
    border-color: #007AFF;
    color: #007AFF;
}

.recent-search-wrap {
    margin-bottom: 0.65rem;
}

.recent-search-input {
    width: 100%;
    border: 1px solid #ccc;
    background: #fff;
    color: #000;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-family: 'Arimo', sans-serif;
}

.recent-search-input:focus {
    outline: none;
    border-color: #007AFF;
}

.recent-state {
    color: #888;
    font-size: 0.8rem;
    padding: 0.6rem 0;
}

.recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: calc(100vh - 420px);
    overflow-y: auto;
}

.recent-item {
    position: relative;
    border: 1px solid #ddd;
    background: #fff;
    padding: 0.75rem;
    border-radius: 8px;
}

.recent-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.recent-name-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.recent-name {
    font-size: 0.82rem;
    font-family: 'Arimo', sans-serif;
    font-weight: 700;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-meta {
    margin-top: 0.45rem;
    color: #888;
    font-size: 0.7rem;
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.recent-actions {
    display: flex;
    gap: 0.5rem;
}

.recent-action {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    background: transparent;
    color: #000;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
}

.recent-action:hover {
    border-color: #007AFF;
    color: #007AFF;
}

.recent-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Tunnel Controls ── */
.tunnel-controls-grid {
    display: grid;
    gap: 0.8rem;
}

.tunnel-control-row {
    display: grid;
    gap: 0.45rem;
}

.tunnel-control-label {
    font-size: 0.68rem;
    color: #868686;
    font-family: 'Arimo', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tunnel-select {
    max-width: 230px;
}

.tunnel-button-row {
    display: flex;
    justify-content: flex-start;
}

.tunnel-join-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.tunnel-join-row .recent-search-input {
    flex: 1;
}

.tunnel-meta {
    font-size: 0.74rem;
    color: #878787;
    font-family: 'Arimo', sans-serif;
    line-height: 1.5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tunnel-meta-label,
.tunnel-meta-divider {
    color: #a0a0a0;
}

.tunnel-code-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border: 1px solid #007AFF;
    border-radius: 999px;
    background: rgba(0, 122, 255, 0.08);
    color: #007AFF;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.tunnel-qr-wrap {
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    padding: 0.75rem;
    display: grid;
    justify-items: center;
}

.tunnel-qr-code {
    width: 176px;
    min-height: 176px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tunnel-qr-code img,
.tunnel-qr-code canvas {
    border-radius: 6px;
}

/* ── Legal Pages ── */
.legal-document {
    max-width: 100%;
    margin: 0 auto;
    color: #000;
    padding: 3rem 4rem;
}

.legal-document h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.legal-document h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.legal-document h3 {
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.legal-document p {
    margin-bottom: 0.75rem;
    line-height: 1.8;
}

.legal-document ul,
.legal-document ol {
    margin: 0.75rem 0;
    margin-left: 1.5rem;
    line-height: 1.8;
}

.last-updated {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 2rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    body.page-link .link-content-wrapper {
        padding: 24px 16px;
        min-height: auto;
    }

    body.page-shared .shared-content-wrapper {
        padding: 24px 10px;
    }

    body.page-shared .shared-heading {
        font-size: 24px;
    }

    body.page-shared .file-info-box {
        width: 100%;
        border-radius: 21px;
    }

    body.page-shared .file-name-text {
        font-size: 24px;
    }

    body.page-shared .file-meta-text {
        font-size: 14px;
    }

    body.page-shared .downloading-box {
        width: 100%;
        height: auto;
        min-height: 160px;
    }

    body.page-shared #error-section {
        width: 100%;
        height: auto;
        min-height: 300px;
        padding: 1.5rem;
    }

    body.page-quickshare .create-view,
    body.page-quickshare .session-view,
    body.page-quickshare .join-view,
    body.page-quickshare .queue-view,
    body.page-quickshare .declined-view {
        padding: 32px 20px 0;
    }

    body.page-quickshare .create-view h1 {
        font-size: 32px;
    }

    body.page-quickshare .create-view .subtitle {
        font-size: 20px;
    }

    body.page-quickshare .bottom-bar,
    body.page-quickshare .join-bottom-bar {
        padding-right: 20px;
    }

    body.page-quickshare .session-view.active {
        flex-direction: column;
        gap: 32px;
    }

    body.page-quickshare .session-right {
        align-items: center;
        width: 100%;
    }

    body.page-quickshare .session-right .drop-zone-icon-wrap {
        display: none;
    }

    body.page-quickshare .session-right .drop-zone {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 140px;
        padding: 28px 16px;
        border: 1.5px dashed #00827B;
        border-radius: 12px;
        background: #FFFFFF;
        gap: 2px;
        -webkit-tap-highlight-color: transparent;
    }

    body.page-quickshare .session-right .drop-zone:active {
        background: rgba(0, 130, 123, 0.05);
        border-color: #00827B;
    }

    body.page-quickshare .drop-zone-mobile-icon {
        display: block;
        width: 28px;
        height: 28px;
        color: #00827B;
        margin-bottom: 10px;
    }

    body.page-quickshare .drop-zone-main-text {
        font-size: 14px;
        font-weight: 500;
        color: #1a1a1a;
    }

    body.page-quickshare .drop-zone-sub-text {
        font-size: 12px;
        color: #6E6E73;
        margin-top: 2px;
        min-height: 14px;
    }

    body.page-quickshare .session-left {
        min-width: 0;
        width: 100%;
    }

    body.page-quickshare .people-heading {
        font-size: 24px;
    }

    body.page-quickshare .join-view h1 {
        font-size: 32px;
    }

    body.page-quickshare .join-view .subtitle {
        font-size: 20px;
    }

    body.page-quickshare .queue-view h1 {
        font-size: 32px;
    }

    body.page-quickshare .declined-view h1 {
        font-size: 28px;
    }

    body.page-quickshare .queue-view .subtitle {
        font-size: 20px;
    }

    body.page-link .two-column-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .tos-modal {
        padding: 20px 16px 24px;
    }

    .tos-modal h2 {
        font-size: 20px;
    }

    .tos-modal-description {
        margin-bottom: 20px;
    }

    .tos-modal-actions {
        flex-direction: row;
        gap: 12px;
        justify-content: center;
    }

    .tos-modal-actions .btn {
        width: auto;
    }

}

/* ═══════════════════════════════════════════
   UPLOADED FILES PAGE (/uploaded)
   ═══════════════════════════════════════════ */

body.page-uploaded .shared-content-wrapper {
    align-items: stretch;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 56px 24px 72px;
}

.uploaded-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.uploaded-head {
    padding: 0 4px;
    margin-bottom: 12px;
    animation: uploaded-in .5s cubic-bezier(.22, 1, .36, 1) backwards;
}

.uploaded-title {
    margin: 0 0 12px;
    color: #000;
    font-family: 'Arimo', sans-serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.uploaded-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0;
    color: #595959;
    font-size: 14px;
    line-height: 1.5;
}

.uploaded-count {
    padding: 2px 10px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    animation: uploaded-pop .35s cubic-bezier(.34, 1.56, .64, 1) backwards;
}

.uploaded-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 16px;
    margin-bottom: 8px;
    border: 1px solid #E2E2E5;
    border-radius: 14px;
    background: #fff;
    color: #8A8A8A;
    cursor: text;
    transition: border-color .15s, box-shadow .2s, transform .2s;
    animation: uploaded-in .5s .05s cubic-bezier(.22, 1, .36, 1) backwards;
}

.uploaded-search:focus-within {
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
}

.uploaded-search svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: color .15s;
}

.uploaded-search:focus-within svg { color: #007AFF; }

.uploaded-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #000;
    font-family: 'Arimo', sans-serif;
    font-size: 16px;
}

/* ── Account menu: transfers badge ── */
.account-menu-avatar { position: relative; }
.account-menu-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FF3B30;
    box-shadow: 0 0 0 2px #fff;
}
.account-menu-dot[hidden],
.account-menu-badge[hidden] { display: none; }
/* Same dot on the mobile avatar button, kept inside its clipped circle. */
.mobile-menu-btn { position: relative; }
.mobile-menu-btn > .account-menu-dot {
    top: 5px;
    right: 5px;
    width: 9px !important;
    height: 9px !important;
}
.mobile-menu-row .mobile-menu-badge { margin-left: auto; }
.account-menu-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #FF3B30;
    color: #fff;
    font-family: 'Arimo', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Transfers page (reuses the link page's card styles via .page-link) ── */
body.page-transfers .main-content { align-items: flex-start; }
body.page-transfers .transfers-wrapper { max-width: 620px; align-items: stretch; }
body.page-transfers .headline,
body.page-transfers .subhead { text-align: center; }

body.page-transfers .transfers-section { margin-top: 36px; }
body.page-transfers .transfers-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    opacity: 0;
    animation: riseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
body.page-transfers .transfers-section-title {
    margin: 0;
    font-family: 'Arimo', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7A7A7A;
}
body.page-transfers .transfers-count {
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: #FF3B30;
    color: #fff;
    font-family: 'Arimo', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
body.page-transfers .transfers-list .card { margin-top: 12px; }

/* History direction filter (All / Received / Sent) */
body.page-transfers .transfers-filter {
    margin-left: auto;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: #F2F2F4;
}
body.page-transfers .transfers-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #6B6B70;
    font-family: 'Arimo', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
body.page-transfers .transfers-filter-btn svg { width: 13px; height: 13px; }
body.page-transfers .transfers-filter-btn:hover { color: #1a1a1f; }
body.page-transfers .transfers-filter-btn[aria-checked="true"] {
    background: #fff;
    color: #1a1a1f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
body.page-transfers .transfers-filter-btn:focus-visible { outline: 2px solid #007AFF; outline-offset: 1px; }

/* Transfer card */
body.page-transfers .transfer-card {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease, height 0.28s ease, margin 0.28s ease, padding 0.28s ease;
}
body.page-transfers .transfer-card .file-icon { position: relative; width: 44px; height: 44px; }
/* Direction badge on the file icon: arrow in for received, out for sent */
body.page-transfers .transfer-direction {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff;
}
body.page-transfers .transfer-card .file-icon .transfer-direction svg { width: 12px; height: 12px; color: #fff; }
body.page-transfers .transfer-direction.is-received { background: #007AFF; }
body.page-transfers .transfer-direction.is-sent { background: #00A36C; }
body.page-transfers .transfer-card.is-muted .transfer-direction { background: #B0B0B6; }
body.page-transfers .transfer-card.is-muted .file-icon { background: #F2F2F4; }
body.page-transfers .transfer-card.is-muted .file-icon svg { color: #9A9A9A; }
body.page-transfers .transfer-card.is-muted .file-meta-name { color: #595959; }
body.page-transfers .transfer-card.is-leaving {
    opacity: 0;
    transform: scale(0.98);
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

body.page-transfers .transfer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #F0F0F2;
}
body.page-transfers .transfer-sender {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
body.page-transfers .transfer-sender-avatar { display: flex; flex-shrink: 0; }
body.page-transfers .transfer-sender-text {
    font-family: 'Arimo', sans-serif;
    font-size: 12.5px;
    color: #7A7A7A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.page-transfers .transfer-sender-text strong { color: #1a1a1f; font-weight: 600; }

body.page-transfers .transfer-actions { display: flex; gap: 8px; flex-shrink: 0; }

body.page-transfers .transfer-btn {
    position: relative;
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    font-family: 'Arimo', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease, opacity 0.15s ease;
}
body.page-transfers .transfer-btn:hover:not(:disabled) { transform: translateY(-1px); }
body.page-transfers .transfer-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }
body.page-transfers .transfer-btn:disabled { cursor: not-allowed; opacity: 0.55; }
body.page-transfers .transfer-btn:focus-visible { outline: 2px solid #007AFF; outline-offset: 2px; }
body.page-transfers .transfer-btn-label { display: inline-flex; align-items: center; gap: 6px; }
body.page-transfers .transfer-btn-label svg { width: 15px; height: 15px; }
body.page-transfers .transfer-btn-spinner { position: absolute; width: 17px; height: 17px; opacity: 0; }
body.page-transfers .transfer-btn.is-loading { opacity: 1; cursor: progress; }
body.page-transfers .transfer-btn.is-loading .transfer-btn-label { opacity: 0; }
body.page-transfers .transfer-btn.is-loading .transfer-btn-spinner { opacity: 1; animation: spin 0.8s linear infinite; }

body.page-transfers .transfer-btn.is-accept { background: #007AFF; color: #fff; }
body.page-transfers .transfer-btn.is-accept:hover:not(:disabled) { background: #0068D6; }
body.page-transfers .transfer-btn.is-decline { background: #F5F5F7; color: #3C3C3C; }
body.page-transfers .transfer-btn.is-decline:hover:not(:disabled) { background: #ECECEF; }
body.page-transfers .transfer-btn.is-decline.is-confirming { background: #FFE9E7; color: #D70015; }
body.page-transfers .transfer-btn.is-download { background: #000; color: #fff; }
body.page-transfers .transfer-btn.is-download:hover:not(:disabled) { opacity: 0.85; }
body.page-transfers .transfer-btn.is-report { background: transparent; color: #8A8A8E; padding: 0 10px; }
body.page-transfers .transfer-btn.is-report:hover:not(:disabled) { background: #FFE9E7; color: #D70015; }
body.page-transfers .transfer-reported { display: inline-flex; align-items: center; gap: 5px; align-self: center; font-size: 12.5px; font-weight: 500; color: #8A8A8E; }
body.page-transfers .transfer-reported svg { width: 13px; height: 13px; }

body.page-transfers .transfer-status {
    flex-shrink: 0;
    font-family: 'Arimo', sans-serif;
    font-weight: 500;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
body.page-transfers .transfer-status.is-accepted { color: #00827B; background: #E6FBEE; }
body.page-transfers .transfer-status.is-declined { color: #8A8A8E; background: #F2F2F4; }
body.page-transfers .transfer-status.is-expired { color: #A15C00; background: #FFF4E0; }
body.page-transfers .transfer-status.is-awaiting { color: #0060D1; background: #EAF2FF; }

/* Download progress: thin bar along the card's bottom edge */
body.page-transfers .transfer-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: transparent;
    opacity: 0;
    transition: opacity 0.2s ease;
}
body.page-transfers .transfer-card.is-downloading .transfer-progress { opacity: 1; background: #EEF4FF; }
body.page-transfers .transfer-progress-fill {
    width: 0;
    height: 100%;
    background: #007AFF;
    transition: width 0.2s ease;
}

/* Empty / error states */
body.page-transfers .transfers-empty {
    margin-top: 12px;
    padding: 28px 20px;
    border: 1.5px dashed #E0E0E4;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-family: 'Arimo', sans-serif;
    opacity: 0;
    animation: riseIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
body.page-transfers .transfers-empty-icon { width: 26px; height: 26px; color: #B0B0B6; margin-bottom: 4px; }
body.page-transfers .transfers-empty strong { font-size: 14px; color: #3C3C3C; font-weight: 600; }
body.page-transfers .transfers-empty p { margin: 0; font-size: 13px; color: #8A8A8E; }
body.page-transfers .transfers-empty.is-error .transfers-empty-icon { color: #FF3B30; }
body.page-transfers .transfers-retry {
    margin-top: 8px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    background: #000;
    color: #fff;
    font-family: 'Arimo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
body.page-transfers .transfers-more { display: block; margin: 16px auto 0; opacity: 1; animation: none; }
body.page-transfers .transfers-more.hidden { display: none; }

/* Device not approved notice */
body.page-transfers .transfers-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFF8EC;
    margin-top: 24px;
}
body.page-transfers .transfers-notice.hidden { display: none; }
body.page-transfers .transfers-notice-icon { width: 24px; height: 24px; color: #C27400; flex-shrink: 0; }
body.page-transfers .transfers-notice-text { flex: 1; min-width: 0; font-family: 'Arimo', sans-serif; }
body.page-transfers .transfers-notice-text strong { font-size: 14px; color: #1a1a1f; }
body.page-transfers .transfers-notice-text p { margin: 2px 0 0; font-size: 12.5px; color: #6B5A3A; line-height: 1.45; }
body.page-transfers .transfers-notice-link {
    flex-shrink: 0;
    font-family: 'Arimo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #007AFF;
    text-decoration: none;
}

/* Loading skeletons */
body.page-transfers .transfer-skeleton { pointer-events: none; }
body.page-transfers .sk {
    border-radius: 6px;
    background: linear-gradient(90deg, #F0F0F2 0%, #F7F7F9 50%, #F0F0F2 100%);
    background-size: 200% 100%;
    animation: skShimmer 1.2s ease-in-out infinite;
}
body.page-transfers .sk-icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
body.page-transfers .sk-line { height: 11px; width: 70%; }
body.page-transfers .sk-line + .sk-line { margin-top: 8px; }
body.page-transfers .sk-line.short { width: 35%; }
body.page-transfers .sk-line.medium { width: 45%; }
@keyframes skShimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (max-width: 620px) {
    body.page-transfers .transfer-card .file-row { flex-wrap: wrap; row-gap: 8px; }
    body.page-transfers .transfer-card .file-meta { flex-basis: calc(100% - 58px); }
    body.page-transfers .transfer-card .expiry-pill,
    body.page-transfers .transfer-card .transfer-status { margin-left: 58px; }
    body.page-transfers .transfer-footer { flex-direction: column; align-items: stretch; }
    body.page-transfers .transfer-actions { justify-content: stretch; }
    body.page-transfers .transfer-actions .transfer-btn { flex: 1; }
    body.page-transfers .transfers-notice { flex-wrap: wrap; }
    body.page-transfers .transfers-section-head { flex-wrap: wrap; row-gap: 10px; }
}

@media (max-width: 400px) {
    body.page-transfers .transfers-filter { margin-left: 0; width: 100%; }
    body.page-transfers .transfers-filter-btn { flex: 1; justify-content: center; padding: 0 8px; }
}

.uploaded-notice {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #F2C98A;
    border-radius: 16px;
    background: #FFF4E3;
    color: #6B4000;
    font-size: 14px;
    line-height: 1.45;
    animation: uploaded-in .4s cubic-bezier(.22, 1, .36, 1) backwards;
}

.uploaded-notice > svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.uploaded-notice p {
    margin: 0 0 6px;
}

.uploaded-notice-link {
    padding: 0;
    border: none;
    background: none;
    color: #6B4000;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.uploaded-list {
    display: flex;
    flex-direction: column;
}

/* flat rows, separated by hairlines; no card backgrounds */
.uploaded-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 12px;
    border-radius: 16px;
    transition: background-color .2s ease;
    animation: uploaded-in .45s cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 35ms);
}

.uploaded-card + .uploaded-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 68px;
    right: 12px;
    height: 1px;
    background: #E4E4E7;
    transition: opacity .2s;
}

.uploaded-card:hover,
.uploaded-card:focus-within { background: rgba(0, 0, 0, 0.035); }
.uploaded-card:hover::before,
.uploaded-card:hover + .uploaded-card::before { opacity: 0; }

.uploaded-card.active { background: rgba(0, 174, 113, 0.06); }
.uploaded-card.done { background: #E3F6EE; }
.uploaded-card.error { background: #FBE6E3; animation: download-card-shake .4s; }

.uploaded-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.uploaded-file-icon {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    color: #595959;
    box-shadow: 0 0 0 1px #E8E8EB;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.uploaded-card:hover .uploaded-file-icon { transform: scale(1.06); }

.uploaded-file-icon svg {
    width: 20px;
    height: 20px;
}

.uploaded-file-info {
    flex: 1;
    min-width: 0;
}

.uploaded-file-name {
    margin: 0 0 3px;
    overflow: hidden;
    color: #000;
    font-family: 'Arimo', sans-serif;
    font-size: 16px;
    font-weight: 510;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.uploaded-file-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    overflow: hidden;
    color: #7A7A7A;
    font-size: 13px;
    white-space: nowrap;
}

.uploaded-meta-dot {
    flex-shrink: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}

.uploaded-expiry.is-soon { color: #B25E00; font-weight: 510; }

.uploaded-locked,
.uploaded-progress-text { display: none; }

.uploaded-progress-text {
    color: #00814F;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.uploaded-card:is(.active, .done, .error) .uploaded-progress-text { display: inline; }
.uploaded-card:is(.active, .done, .error) .uploaded-expiry,
.uploaded-card:is(.active, .done, .error) .uploaded-expiry + .uploaded-locked { display: none; }
.uploaded-card.error .uploaded-progress-text { color: #B3261E; }

.uploaded-actions {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
}

.uploaded-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #1a1a1a;
    cursor: pointer;
    transition: background-color .15s, color .2s, transform .15s cubic-bezier(.34, 1.56, .64, 1), opacity .15s;
}

.uploaded-action svg {
    width: 18px;
    height: 18px;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .15s;
}

.uploaded-action:hover:not(:disabled) { background: rgba(0, 0, 0, 0.07); transform: translateY(-1px); }
.uploaded-action:active:not(:disabled) { transform: scale(.9); }
.uploaded-action:focus-visible { outline: 2px solid #007AFF; outline-offset: 2px; }
.uploaded-action:disabled { opacity: .35; cursor: not-allowed; }

.uploaded-action-primary {
    background: #007AFF;
    color: #fff;
}

.uploaded-action-primary:hover:not(:disabled) { background: #006AE0; }

.uploaded-ic-done {
    position: absolute;
    opacity: 0;
    transform: scale(.4) rotate(-30deg);
}

.uploaded-action.is-copied { background: #00AE71; color: #fff; }
.uploaded-action.is-copied .uploaded-ic { opacity: 0; transform: scale(.4); }
.uploaded-action.is-copied .uploaded-ic-done { opacity: 1; transform: none; }

.uploaded-card.active .uploaded-action-primary svg { animation: uploaded-bob 1s ease-in-out infinite; }

.uploaded-card .download-bar-track {
    display: none;
    height: 4px;
    margin-left: 58px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

.uploaded-card.active .download-bar-track { display: block; animation: uploaded-fade .2s ease backwards; }

.uploaded-card .download-bar-fill {
    width: 0;
    height: 100%;
    border-radius: 4px;
    background: #00AE71;
    transition: width .2s ease;
}

.uploaded-card.is-locked .uploaded-file-name { color: #8A8A8A; }
.uploaded-card.is-locked .uploaded-file-icon { color: #B3261E; box-shadow: 0 0 0 1px #F3C3BE; }
.uploaded-card.is-locked .uploaded-locked {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #B3261E;
    font-weight: 510;
    cursor: help;
}
.uploaded-locked svg { width: 13px; height: 13px; }

/* Why a file is locked. Drawn on the card, not the badge: the meta line
   clips overflow. Same look as the "user not found" tooltip on /link. */
.uploaded-card.is-locked::after {
    content: attr(data-locked-tip);
    position: absolute;
    left: 58px;
    top: calc(100% - 10px);
    background: #1C1C1E;
    color: #fff;
    font-family: 'Arimo', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    max-width: 260px;
    width: max-content;
    padding: 6px 10px;
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 5;
}
.uploaded-card.is-locked:has(.uploaded-locked:hover, .uploaded-locked:focus-visible)::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.uploaded-card.is-locked .uploaded-expiry,
.uploaded-card.is-locked .uploaded-expiry + .uploaded-locked + .uploaded-progress-text { display: none; }

.uploaded-skeleton {
    height: 72px;
    margin-bottom: 4px;
    background: linear-gradient(100deg, #EAEAEC 30%, #F4F4F6 50%, #EAEAEC 70%) 0 0 / 300% 100%;
    animation: uploaded-shimmer 1.2s ease-in-out infinite;
}

.uploaded-skeleton::before { display: none; }
.uploaded-skeleton:nth-child(2) { opacity: .7; }
.uploaded-skeleton:nth-child(3) { opacity: .4; }

.uploaded-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 20px;
    text-align: center;
    animation: uploaded-in .45s cubic-bezier(.22, 1, .36, 1) backwards;
}

.uploaded-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #fff;
    color: #595959;
    box-shadow: 0 0 0 1px #E8E8EB;
    animation: uploaded-pop .5s .1s cubic-bezier(.34, 1.56, .64, 1) backwards;
}

.uploaded-state-icon svg {
    width: 26px;
    height: 26px;
}

.uploaded-state-title {
    margin: 0 0 6px;
    color: #000;
    font-size: 20px;
    font-weight: 590;
}

.uploaded-state-desc {
    max-width: 340px;
    margin: 0;
    color: #595959;
    font-size: 14px;
    line-height: 1.45;
}

.uploaded-state-btn {
    display: inline-flex;
    align-items: center;
    height: 44px;
    margin-top: 22px;
    padding: 0 24px;
    border: none;
    border-radius: 999px;
    background: #007AFF;
    color: #fff;
    font-family: 'Arimo', sans-serif;
    font-size: 15px;
    font-weight: 510;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), background-color .15s;
}

.uploaded-state-btn:hover { background: #006AE0; transform: translateY(-1px); }
.uploaded-state-btn:active { transform: scale(.96); }

.uploaded-more {
    align-self: center;
    height: 44px;
    margin-top: 12px;
    padding: 0 28px;
    border: 1px solid #E2E2E5;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-family: 'Arimo', sans-serif;
    font-size: 15px;
    font-weight: 510;
    cursor: pointer;
    transition: border-color .15s, transform .15s cubic-bezier(.34, 1.56, .64, 1);
}

.uploaded-more:hover:not(:disabled) { border-color: #595959; transform: translateY(-1px); }
.uploaded-more:active:not(:disabled) { transform: scale(.96); }
.uploaded-more.is-loading { opacity: .6; cursor: progress; }

.uploaded-section .hidden,
.uploaded-section.hidden {
    display: none !important;
}

@keyframes uploaded-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes uploaded-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes uploaded-pop {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: none; }
}

@keyframes uploaded-bob {
    0%, 100% { transform: translateY(-1px); }
    50% { transform: translateY(2px); }
}

@keyframes uploaded-shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

@media (max-width: 768px) {
    body.page-uploaded .shared-content-wrapper {
        padding: 32px 16px 48px;
    }

    .uploaded-head {
        margin-bottom: 8px;
    }

    .uploaded-title {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .uploaded-subtitle {
        font-size: 13px;
    }

    .uploaded-card {
        padding: 12px 8px;
        gap: 6px;
    }

    .uploaded-card + .uploaded-card::before {
        left: 60px;
        right: 8px;
    }

    .uploaded-card-top {
        gap: 12px;
    }

    .uploaded-file-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }

    .uploaded-file-name {
        font-size: 15px;
    }

    .uploaded-file-meta {
        font-size: 12px;
        gap: 6px;
    }

    /* keep rows to one line of meta on phones: size + expiry, drop upload date */
    .uploaded-meta-date,
    .uploaded-meta-date + .uploaded-meta-dot {
        display: none;
    }

    .uploaded-actions {
        gap: 4px;
    }

    .uploaded-action {
        width: 44px;
        height: 44px;
    }

    .uploaded-card .download-bar-track {
        margin-left: 52px;
    }

    .uploaded-more {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uploaded-head,
    .uploaded-search,
    .uploaded-notice,
    .uploaded-card,
    .uploaded-state,
    .uploaded-state-icon,
    .uploaded-count,
    .uploaded-skeleton,
    .uploaded-card.active .uploaded-action-primary svg {
        animation: none;
    }
}

/* ═══════════════════════════════════════════
   MOBILE (≤768px): header, menu sheet, home
   ═══════════════════════════════════════════ */

@keyframes mobile-menu-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
}

@keyframes home-choices-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
    html {
        overflow-x: hidden;
    }

    /* ── Header: always a single row — logo, (login), menu button ── */
    .header-wrapper,
    body.page-shared .header-wrapper {
        padding: 12px 12px 6px;
    }

    .header,
    body.page-shared .header {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        padding: 6px 6px 6px 20px;
        border-radius: 999px;
        backdrop-filter: none;
    }

    .header-left {
        margin-right: auto;
        min-width: 0;
    }

    .quicklinks,
    .recent-files-link,
    .account-menu-trigger,
    .account-menu {
        display: none !important;
    }

    .logo-text,
    body.page-shared .logo-text {
        font-size: 24px;
    }

    .login-btn,
    body.page-shared .login-btn {
        display: inline-flex;
        align-items: center;
        height: 40px;
        padding: 0 18px;
        margin-left: 0;
        border-radius: 12px;
        font-size: 15px;
        white-space: nowrap;
    }

    .mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: #FFFFFF;
        color: #000000;
        cursor: pointer;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-btn svg {
        width: 20px;
        height: 20px;
    }

    .mobile-menu-btn-avatar,
    .mobile-menu-btn > span {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50%;
        object-fit: cover;
        font-size: 12px !important;
    }

    body.page-index .header-wrapper {
        padding: 14px 16px 0 20px;
    }

    body.page-index .header {
        padding: 0;
        background: none;
        border-radius: 0;
    }

    body.page-index .logo-text {
        font-size: 26px;
    }

    body.page-index .mobile-menu-btn {
        background: #E4E3E3;
    }

    /* ── Menu sheet (one menu for guests and logged-in users) ── */
    .mobile-menu.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 3000;
        padding: 14px 16px calc(20px + env(safe-area-inset-bottom)) 20px;
        background: #F5F5F7;
        overflow-y: auto;
        animation: mobile-menu-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    .mobile-menu-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 40px;
    }

    .mobile-menu-logo {
        font-family: 'TASA Orbiter', sans-serif;
        font-weight: 800;
        font-size: 26px;
        color: #000000;
        text-decoration: none;
        text-shadow: 0.75px 0 0 currentColor, 0 0.375px 0 currentColor;
    }

    .mobile-menu .mobile-menu-btn {
        background: #E4E3E3;
    }

    .mobile-menu-user {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 28px;
        padding: 12px 16px 12px 12px;
        background: #FFFFFF;
        border-radius: 999px;
        color: #000000;
        text-decoration: none;
    }

    .mobile-menu-user-avatar,
    .mobile-menu-user > span:not(.mobile-menu-user-text) {
        flex-shrink: 0;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50%;
        object-fit: cover;
        font-size: 16px !important;
    }

    .mobile-menu-user-text {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    .mobile-menu-user-name {
        font-size: 17px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-menu-user-sub {
        margin-top: 2px;
        font-size: 14px;
        color: #6E6E73;
    }

    .mobile-menu-user svg {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        color: #8E8E93;
    }

    .mobile-menu-nav {
        display: flex;
        flex-direction: column;
        margin-top: 32px;
    }

    .mobile-menu-nav a {
        padding: 4px 0;
        font-family: 'TASA Orbiter', sans-serif;
        font-weight: 800;
        font-size: 40px;
        line-height: 1.2;
        letter-spacing: -0.01em;
        color: #000000;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-nav a:active {
        color: #00AE71;
    }

    .mobile-menu-list {
        display: flex;
        flex-direction: column;
        margin-top: 28px;
        padding-top: 10px;
        border-top: 1px solid #E0E0E0;
    }

    .mobile-menu-row {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        min-height: 54px;
        padding: 0 2px;
        background: none;
        border: none;
        font-family: 'Arimo', sans-serif;
        font-size: 17px;
        color: #1A1A1F;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .mobile-menu-row svg {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        color: #00827B;
    }

    .mobile-menu-bottom {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-top: auto;
        padding-top: 24px;
    }

    .mobile-menu-login {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 54px;
        border-radius: 12px;
        background: #007AFF;
        color: #FFFFFF;
        font-size: 17px;
        font-weight: 600;
        text-decoration: none;
    }

    .mobile-menu-legal {
        display: flex;
        justify-content: center;
        gap: 24px;
    }

    .mobile-menu-legal a {
        font-size: 13px;
        color: #6E6E73;
    }

    /* ── Footer: legal links only on mobile (the rest live in the menu) ── */
    .footer a:not([href="/tos"]):not([href="/privacy"]) {
        display: none;
    }

    /* ── Home: hero on top, the star rising from the bottom, actions on the star ── */
    body.page-index {
        min-height: 100dvh;
    }

    /* hero on row 1; the star and the actions share row 2, so the star always starts right under the hero */
    body.page-index .main-content {
        display: grid;
        grid-template-rows: auto 1fr;
    }

    body.page-index .hero-section {
        grid-row: 1;
    }

    body.page-index .hero-section {
        padding: 36px 24px 0;
    }

    body.page-index .hero-title {
        margin-bottom: 16px;
        font-size: clamp(36px, 10.6vw, 48px);
        line-height: 1.02;
        letter-spacing: -0.015em;
        text-wrap: balance;
    }

    body.page-index .hero-subtitle {
        max-width: 330px;
        padding: 0;
        font-size: 17px;
        font-weight: 500;
        line-height: 1.45;
        color: #3A3A3C;
        text-wrap: balance;
    }

    body.page-index .action-cards {
        display: none;
    }

    body.page-index .star-bg {
        grid-row: 2;
        grid-column: 1;
        position: relative;
        inset: auto;
        width: auto;
        height: auto;
        margin: 28px 0 calc(-48px - env(safe-area-inset-bottom));
        background: transparent;
    }

    body.page-index .star-reveal {
        background: transparent;
    }

    body.page-index .star-reveal svg {
        position: absolute;
        top: 0;
        left: 50%;
        width: 170vw;
        height: 170vw;
        max-width: none;
        transform: translateX(-50%);
    }

    body.page-index .home-mobile-actions {
        grid-row: 2;
        grid-column: 1;
        align-self: end;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 124px 16px 18px;
    }

    .home-trust {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin: 0 0 10px;
        padding: 0;
        list-style: none;
    }

    .home-trust li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 0 12px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        color: #FFFFFF;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
    }

    .home-trust svg {
        width: 15px;
        height: 15px;
    }

    .home-action {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 72px;
        padding: 12px 20px 12px 12px;
        background: #FFFFFF;
        border-radius: 999px;
        box-shadow: 0 12px 32px rgba(0, 60, 45, 0.22);
        color: #000000;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s ease;
    }

    .home-action:active {
        transform: scale(0.98);
    }

    .home-action-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #00827B;
        color: #FFFFFF;
    }

    .home-action-icon svg {
        width: 22px;
        height: 22px;
    }

    .home-action-icon-soft {
        background: #E3F6EE;
        color: #00827B;
    }

    .home-action-text {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    .home-action-title {
        font-size: 17px;
        font-weight: 700;
        line-height: 1.25;
    }

    .home-action-desc {
        margin-top: 2px;
        font-size: 14px;
        line-height: 1.3;
        color: #6E6E73;
    }

    .home-action-arrow {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        color: #00827B;
        transition: transform 0.2s ease;
    }

    .home-action-group {
        background: #FFFFFF;
        border-radius: 36px;
        box-shadow: 0 12px 32px rgba(0, 60, 45, 0.22);
    }

    .home-action-group > summary {
        list-style: none;
        background: transparent;
        box-shadow: none;
    }

    .home-action-group > summary::-webkit-details-marker {
        display: none;
    }

    .home-action-group[open] .home-action-arrow {
        transform: rotate(180deg);
    }

    .home-action-choices {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0 12px 12px;
    }

    .home-action-group[open] .home-action-choices {
        animation: home-choices-in 0.22s ease backwards;
    }

    .home-choice {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 52px;
        border-radius: 999px;
        background: #E3F6EE;
        color: #00827B;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
    }

    .home-choice svg {
        width: 18px;
        height: 18px;
    }

    .home-choice-primary {
        background: #00827B;
        color: #FFFFFF;
    }

    body.page-index .footer {
        align-items: center;
        gap: 24px;
        height: calc(48px + env(safe-area-inset-bottom));
        padding: 0 20px env(safe-area-inset-bottom);
        background: transparent;
    }

    body.page-index .footer a {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.88);
    }
}

/* ── Mobile upload surfaces & QuickShare controls: sized for thumbs ── */
@media (max-width: 768px) {
    body.page-quickshare .session-right .drop-zone {
        min-height: 240px;
        padding: 32px 20px;
        border: 2px dashed #00AE71;
        border-radius: 24px;
        background: #FFFFFF;
    }

    body.page-quickshare .drop-zone-main-text {
        font-size: 18px;
        font-weight: 700;
    }

    body.page-quickshare .drop-zone-sub-text {
        margin-top: 4px;
        font-size: 14px;
    }

    body.page-link .drop-zone.uploading p,
    body.page-link .drop-zone.success p {
        font-size: 16px;
    }

    body.page-quickshare .drop-zone-mobile-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 14px;
    }

    .start-btn,
    .blue-btn {
        width: auto;
        min-width: 132px;
        height: 48px;
        padding: 0 24px;
        font-size: 16px;
        font-weight: 600;
    }

    .code-square,
    .join-code-square {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        font-size: 36px;
    }

    .join-code-hidden-input {
        letter-spacing: 62px;
    }
}

@media (max-width: 380px) {
    .home-action-desc {
        font-size: 13px;
    }
}

@media (max-width: 768px) and (max-height: 700px) {
    .home-trust {
        display: none;
    }

    body.page-index .hero-section {
        padding-top: 24px;
    }
}

/* ── Mobile upload dropzone: filename, real progress bar, percentage, ETA ── */
@media (max-width: 768px) {
    /* sizing only — colors, borders and state changes stay the desktop ones (background, border-color,
       icon color, ring pulse, shake, badge) so mobile reads as the same dropzone, just bigger for touch */
    body.page-link .drop-zone {
        width: 100%;
        max-width: 100%;
        min-height: 220px;
        padding: 28px 20px;
        border-radius: 20px;
        -webkit-tap-highlight-color: transparent;
    }

    body.page-link .drop-zone:active {
        transform: scale(0.98);
    }

    body.page-link .drop-zone-icon-wrap {
        width: 72px;
        height: 72px;
        margin: 0 auto 16px;
    }

    body.page-link .drop-zone-icon {
        width: 32px;
        height: 32px;
    }

    body.page-link .drop-zone h3,
    body.page-link .drop-zone p {
        display: none;
    }

    body.page-link .drop-zone:is(.uploading, .success, .error, .warning) h3,
    body.page-link .drop-zone:is(.uploading, .success, .error, .warning) p {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-link .drop-zone h3 {
        margin: 0 0 4px;
        font-size: 18px;
        font-weight: 700;
        color: #000000;
    }

    body.page-link .drop-zone p {
        margin: 0;
        font-size: 14px;
        color: #6E6E73;
    }

    body.page-link .drop-zone-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body.page-link .drop-zone:is(.uploading, .success, .error, .warning) .drop-zone-mobile {
        display: none;
    }

    body.page-link .drop-zone-mobile-title {
        font-size: 18px;
        font-weight: 700;
        color: #1A1A1A;
    }

    body.page-link .drop-zone-mobile-subtitle {
        margin-top: 4px;
        font-size: 14px;
        color: #6E6E73;
    }

    body.page-link .drop-zone-progress-row {
        display: none;
    }

    body.page-link .drop-zone.uploading .drop-zone-progress-row {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: baseline;
        gap: 10px 12px;
        width: 100%;
        margin-top: 22px;
    }

    body.page-link .drop-zone-progress {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        height: 10px;
        margin: 0;
        border-radius: 999px;
        background: #E3F6EE;
    }

    body.page-link .drop-zone-progress-fill {
        border-radius: 999px;
        background: linear-gradient(90deg, #00AE71, #00827B);
    }

    body.page-link .drop-zone-pct {
        display: block;
        grid-row: 2;
        grid-column: 1;
        font-size: 15px;
        font-weight: 700;
        color: #00827B;
        font-variant-numeric: tabular-nums;
    }

    body.page-link .drop-zone-eta {
        grid-row: 2;
        grid-column: 2;
        min-width: 0;
        font-size: 13px;
        color: #6E6E73;
        text-align: right;
    }

    /* ── Dialogs become bottom sheets ── */
    .tos-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .tos-modal,
    .share-url-card {
        width: 100%;
        max-width: none;
        max-height: 90dvh;
        overflow-y: auto;
        padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
    }

    .tos-modal::before,
    .share-url-card::before {
        content: "";
        display: block;
        width: 40px;
        height: 5px;
        margin: 0 auto 18px;
        border-radius: 3px;
        background: #D1D1D6;
    }

    .tos-modal h2 {
        font-size: 22px;
    }

    .share-url-card {
        transform: translateY(100%);
        opacity: 1;
    }

    .tos-overlay.visible .share-url-card {
        transform: none;
    }

    .share-url-text {
        margin-bottom: 20px;
        padding: 12px 14px;
        border-radius: 12px;
        background: #F2F2F7;
        font-size: 15px;
        color: #3A3A3C;
        white-space: normal;
        word-break: break-all;
    }

    .tos-modal-actions,
    .share-url-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .tos-modal-actions .btn,
    .btn-share-discard,
    .btn-share-copy,
    .btn-share-native {
        width: 100%;
        height: 52px;
        border-radius: 12px;
        font-size: 17px;
    }
}

/* ═══════════════════════════════════════════
   MOBILE MOTION (skipped for reduced motion)
   ═══════════════════════════════════════════ */

@keyframes m-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes m-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes m-star-rise {
    from { opacity: 0; transform: translateY(120px); }
    to   { opacity: 1; transform: none; }
}

@keyframes m-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

@keyframes m-menu-out {
    to { opacity: 0; transform: translateY(-10px); }
}

@keyframes m-pop {
    0%   { transform: scale(0.6); }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes m-vt-out {
    to { opacity: 0; transform: translateY(-10px); }
}

@keyframes m-vt-in {
    from { opacity: 0; transform: translateY(14px); }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    /* smooth page-to-page navigation; the header stays put while content cross-fades */
    @view-transition {
        navigation: auto;
    }

    .header-wrapper {
        view-transition-name: site-header;
    }

    ::view-transition-old(root) {
        animation: m-vt-out 0.2s ease backwards;
    }

    ::view-transition-new(root) {
        animation: m-vt-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    /* home: staggered entrance instead of the desktop blur-reveal */
    body.page-index {
        animation: none;
    }

    body.page-index .header-wrapper {
        animation: m-fade 0.5s ease backwards;
    }

    body.page-index .hero-title {
        animation: m-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s backwards;
    }

    body.page-index .hero-subtitle {
        animation: m-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.14s backwards;
    }

    body.page-index .star-bg {
        animation: m-star-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards;
    }

    .home-trust li,
    .home-mobile-actions > .home-action,
    .home-action-group {
        animation: m-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    .home-trust li:nth-child(1) { animation-delay: 0.42s; }
    .home-trust li:nth-child(2) { animation-delay: 0.48s; }
    .home-trust li:nth-child(3) { animation-delay: 0.54s; }
    .home-mobile-actions > .home-action { animation-delay: 0.6s; }
    .home-action-group { animation-delay: 0.68s; }

    body.page-index .footer {
        animation: m-fade 0.6s ease 0.8s backwards;
    }

    .home-action:active .home-action-arrow {
        transform: translateX(4px);
    }

    .home-action-group[open] .home-action:active .home-action-arrow {
        transform: rotate(180deg);
    }

    /* menu sheet: staggered contents, animated close */
    .mobile-menu.open .mobile-menu-user,
    .mobile-menu.open .mobile-menu-nav a,
    .mobile-menu.open .mobile-menu-row,
    .mobile-menu.open .mobile-menu-bottom {
        animation: m-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    .mobile-menu.open .mobile-menu-user { animation-delay: 0.05s; }
    .mobile-menu.open .mobile-menu-nav a:nth-child(1) { animation-delay: 0.09s; }
    .mobile-menu.open .mobile-menu-nav a:nth-child(2) { animation-delay: 0.14s; }
    .mobile-menu.open .mobile-menu-nav a:nth-child(3) { animation-delay: 0.19s; }
    .mobile-menu.open .mobile-menu-row:nth-child(1) { animation-delay: 0.24s; }
    .mobile-menu.open .mobile-menu-row:nth-child(2) { animation-delay: 0.28s; }
    .mobile-menu.open .mobile-menu-row:nth-child(3) { animation-delay: 0.32s; }
    .mobile-menu.open .mobile-menu-row:nth-child(4) { animation-delay: 0.36s; }
    .mobile-menu.open .mobile-menu-bottom { animation-delay: 0.40s; }

    .mobile-menu.open.closing {
        animation: m-menu-out 0.2s ease forwards;
    }

    .mobile-menu-btn {
        transition: transform 0.15s ease, background-color 0.2s ease;
    }

    .mobile-menu-btn:active {
        transform: scale(0.92);
    }

    /* subpage content eases in, QuickShare views too when they switch */
    body.page-link .link-content-wrapper,
    body.page-shared .shared-content-wrapper,
    body.page-quickshare .create-view.active,
    body.page-quickshare .join-view.active,
    body.page-quickshare .queue-view.active,
    body.page-quickshare .session-view.active {
        animation: m-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    /* upload: progress slides in, success check pops */
    body.page-link .drop-zone.uploading .drop-zone-progress-row {
        animation: m-fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    body.page-link .drop-zone.success .drop-zone-icon-wrap {
        animation: m-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    }

    body.page-link .drop-zone:is(.uploading, .success, .error, .warning) h3,
    body.page-link .drop-zone:is(.uploading, .success, .error, .warning) p {
        animation: m-fade 0.35s ease backwards;
    }

    /* bottom sheets slide up */
    .tos-overlay:not(.hidden) {
        animation: m-fade 0.25s ease backwards;
    }

    .tos-overlay:not(.hidden) .tos-modal {
        animation: m-sheet-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    .share-url-card {
        transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .mobile-menu.open {
        animation: none;
    }

    .share-url-card {
        transition: none;
    }
}

/* smooth Quick Share expand where the browser can animate to height:auto */
@supports (interpolate-size: allow-keywords) {
    @media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
        .home-action-group {
            interpolate-size: allow-keywords;
        }

        .home-action-group::details-content {
            height: 0;
            overflow: clip;
            transition: height 0.38s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.38s allow-discrete;
        }

        .home-action-group[open]::details-content {
            height: auto;
        }
    }
}

/* ── Quick share: joiner status, declined screen, host approvals ── */
.qs-status {
    display: flex;
    margin-top: 28px;
    padding: 16px 18px;
    max-width: 440px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    animation: qs-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.qs-status.hidden { display: none; }

.qs-status-title {
    margin: 0;
    font-family: 'Arimo', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #000;
}

.qs-status-text {
    margin: 4px 0 0;
    font-family: 'Arimo', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: #3C3C43;
}

.qs-status-code {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #F2F2F7;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #000;
}

.qs-status-code.hidden { display: none; }

@keyframes qs-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

body.page-quickshare .declined-view {
    display: none;
    flex-direction: column;
    align-items: flex-start;
}

/* Wide screens: approvals / the joiner's status sit in the empty space on
   the right; narrower screens stack them below the people. */
@media (min-width: 1100px) {
    body.page-quickshare .create-view.active,
    body.page-quickshare .queue-view.active {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
        column-gap: 72px;
        align-items: start;
    }

    body.page-quickshare .qs-side {
        position: sticky;
        top: 120px;
        padding-top: 6px;
    }

    body.page-quickshare .qs-side .approval-requests,
    body.page-quickshare .qs-side .qs-status {
        margin-top: 0;
        max-width: none;
    }

    body.page-quickshare .qs-side .approval-heading-row .people-heading {
        font-size: 20px;
    }
}

body.page-quickshare .declined-view.active {
    display: flex;
    animation: qs-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.declined-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #F2F2F7;
}

.declined-icon svg {
    width: 30px;
    height: 30px;
    color: #000;
}

.declined-view .declined-home {
    margin-top: 28px;
    text-decoration: none;
}

.approval-heading-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.approval-heading-row .people-heading {
    margin: 0;
}

.approval-count {
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #E5E5EA;
    color: #000;
    font-family: 'Arimo', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}

.approval-all-btn {
    margin-left: auto;
    border: none;
    border-radius: 999px;
    padding: 6px 14px;
    background: #E5F0FF;
    color: #0A84FF;
    font-family: 'Arimo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.approval-request {
    animation: qs-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.qs-confirm-title {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 590;
}

.qs-confirm-desc {
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    body.page-quickshare .people-row {
        flex-wrap: wrap;
        gap: 16px 18px;
    }

    body.page-quickshare .person-circle {
        width: 60px;
        height: 60px;
    }

    body.page-quickshare .person-name {
        max-width: 72px;
        font-size: 14px;
    }

    .qs-status {
        max-width: none;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ── Transfers: signed-out landing (web/templates/transfers-guest.html) ── */
/* The demo cards loop every 13s (keyframes tg-*, copied from the homepage transfers promo and extended).
   transfers-guest.js adds .is-playing to #tg-demo while it is on screen. */

body.page-transfers-guest .main-content {
    align-items: center;
    justify-content: center;
    padding: 48px clamp(32px, 6vw, 112px) 72px;
}

body.page-transfers-guest .tg-layout {
    width: 100%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    grid-template-areas:
        "copy demo"
        "points demo";
    column-gap: clamp(64px, 10vw, 200px);
    align-items: center;
}

body.page-transfers-guest .tg-copy {
    grid-area: copy;
    align-self: end;
}

body.page-transfers-guest .tg-demo {
    grid-area: demo;
}

/* Staggered entrance */
body.page-transfers-guest .tg-s {
    animation: tg-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(var(--i) * 70ms + 80ms);
}

@keyframes tg-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(4px);
    }
}

/* ── Copy ── */
body.page-transfers-guest .tg-title {
    margin: 0;
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 800;
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: #000;
    text-wrap: balance;
}

body.page-transfers-guest .tg-title span {
    color: #00AE71;
    white-space: nowrap;
}

body.page-transfers-guest .tg-desc {
    margin: 22px 0 0;
    max-width: 500px;
    font-size: 19px;
    line-height: 1.55;
    color: #595959;
}

body.page-transfers-guest .tg-cta {
    margin-top: 36px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 28px;
    border-radius: 16px;
    background: #00827B;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 130, 123, 0.22);
    transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.2s ease;
}

/* light sweep across the button every few seconds, and on hover */
body.page-transfers-guest .tg-cta::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-18deg);
    animation: tg-sheen 5.5s ease-in-out 1.6s infinite;
    pointer-events: none;
}

@keyframes tg-sheen {
    0% { left: -60%; }
    22%, 100% { left: 130%; }
}

body.page-transfers-guest .tg-cta:hover {
    background: #007770;
    box-shadow: 0 14px 30px rgba(0, 130, 123, 0.32);
}

body.page-transfers-guest .tg-cta:active {
    transform: scale(0.98);
}

body.page-transfers-guest .tg-cta:focus-visible {
    outline: 2px solid #00827B;
    outline-offset: 3px;
}

body.page-transfers-guest .tg-cta svg {
    width: 19px;
    height: 19px;
    transition: transform 0.2s ease;
}

body.page-transfers-guest .tg-cta:hover svg {
    transform: translateX(4px);
}

/* Three points under the button; the icons draw themselves in */
body.page-transfers-guest .tg-points {
    grid-area: points;
    align-self: start;
    list-style: none;
    display: grid;
    gap: 20px;
    max-width: 520px;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid #E2E2E6;
}

body.page-transfers-guest .tg-points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

body.page-transfers-guest .tg-points li > svg {
    flex-shrink: 0;
    margin-top: 1px;
}

body.page-transfers-guest .tg-points li > svg {
    width: 24px;
    height: 24px;
    color: #00AE71;
    stroke-width: 2.1;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.page-transfers-guest .tg-points li > svg * {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: tg-draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: calc(var(--i) * 70ms + 450ms);
}

@keyframes tg-draw {
    to { stroke-dashoffset: 0; }
}

body.page-transfers-guest .tg-points li:hover > svg {
    transform: translateY(-3px) rotate(-8deg);
}

body.page-transfers-guest .tg-points strong {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
}

body.page-transfers-guest .tg-points p {
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.5;
    color: #6E6E73;
}

/* ── Demo stage ── */
/* transfers-guest.js sets --rx/--ry (tilt) and --px/--py (parallax) from the pointer */
body.page-transfers-guest .tg-stage {
    position: relative;
    height: 500px;
    border-radius: 32px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 12% 0%, rgba(121, 255, 161, 0.42), transparent 55%),
        linear-gradient(160deg, #00AE71 0%, #00827B 100%);
    box-shadow: 0 40px 90px rgba(0, 110, 90, 0.22), 0 2px 8px rgba(0, 0, 0, 0.05);
    transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    animation: tg-stage-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}

body.page-transfers-guest .tg-deck,
body.page-transfers-guest .tg-bar {
    translate: var(--px, 0px) var(--py, 0px);
    transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-transfers-guest .tg-star {
    translate: calc(var(--px, 0px) * -1.6) calc(var(--py, 0px) * -1.6);
    transition: translate 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tg-stage-in {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
}

body.page-transfers-guest .tg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

body.page-transfers-guest .tg-glow-a {
    width: 280px;
    height: 280px;
    left: -80px;
    bottom: -90px;
    background: rgba(121, 255, 161, 0.35);
    animation: tg-drift 14s ease-in-out infinite alternate;
}

body.page-transfers-guest .tg-glow-b {
    width: 220px;
    height: 220px;
    right: -40px;
    top: 38%;
    background: rgba(0, 122, 255, 0.22);
    animation: tg-drift 17s ease-in-out -6s infinite alternate-reverse;
}

@keyframes tg-drift {
    to { transform: translate(60px, -40px) scale(1.15); }
}

body.page-transfers-guest .tg-star {
    position: absolute;
    right: -110px;
    top: -140px;
    width: 380px;
    height: 380px;
    opacity: 0.12;
    z-index: 0;
    animation: tg-spin 120s linear infinite;
}

@keyframes tg-spin {
    to { transform: rotate(360deg); }
}

body.page-transfers-guest .tg-bar {
    position: absolute;
    top: 26px;
    left: 28px;
    right: 28px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.page-transfers-guest .tg-bar-title {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: #fff;
}

body.page-transfers-guest .tg-bar-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 14px;
}

body.page-transfers-guest .tg-bar-count svg {
    width: 16px;
    height: 16px;
}

body.page-transfers-guest .tg-num {
    display: inline-grid;
    height: 1.2em;
    line-height: 1.2em;
    overflow: hidden;
}

body.page-transfers-guest .tg-num b {
    grid-area: 1 / 1;
    font-weight: 700;
    text-align: center;
}

body.page-transfers-guest .tg-deck {
    position: absolute;
    left: 28px;
    right: 28px;
    top: 0;
    bottom: 166px;
    z-index: 3;
}

body.page-transfers-guest .tg-mini {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    transform-origin: 50% 100%;
    background: #fff;
    border-radius: 18px;
    padding: 18px 18px 22px;
    box-shadow: 0 18px 40px rgba(0, 50, 40, 0.28);
}

body.page-transfers-guest .tg-c2 {
    opacity: 0.55;
    transform: translateY(12px) scale(0.94);
    z-index: 2;
}

body.page-transfers-guest .tg-c3 {
    opacity: 0.3;
    transform: translateY(22px) scale(0.88);
    z-index: 1;
    overflow: hidden;
}

body.page-transfers-guest .tg-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-transfers-guest .tg-fileicon {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 11px;
    background: #F0F4FF;
    color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-transfers-guest .tg-fileicon > svg {
    width: 21px;
    height: 21px;
}

body.page-transfers-guest .tg-dir {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #007AFF;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff;
}

body.page-transfers-guest .tg-dir.is-sent {
    background: #00A36C;
}

body.page-transfers-guest .tg-dir svg {
    width: 12px;
    height: 12px;
}

body.page-transfers-guest .tg-meta {
    flex: 1;
    min-width: 0;
}

body.page-transfers-guest .tg-name {
    font-weight: 700;
    font-size: 16px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-transfers-guest .tg-sub {
    margin-top: 2px;
    font-size: 13px;
    color: #7A7A7A;
}

body.page-transfers-guest .tg-sub b {
    margin: 0 6px;
    font-weight: 400;
    opacity: 0.6;
}

body.page-transfers-guest .tg-stack {
    position: relative;
    display: grid;
    justify-items: end;
    align-items: center;
}

body.page-transfers-guest .tg-stack > * {
    grid-area: 1 / 1;
}

body.page-transfers-guest .tg-pill {
    font-size: 12.5px;
    font-weight: 500;
    color: #00827B;
    background: #E6FBEE;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

body.page-transfers-guest .tg-pill.is-blue {
    color: #0060D1;
    background: #EAF2FF;
}

body.page-transfers-guest .tg-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 36px;
    margin-top: 14px;
    padding-top: 14px;
    box-sizing: content-box;
    border-top: 1px solid #F0F0F2;
}

body.page-transfers-guest .tg-who {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #7A7A7A;
    white-space: nowrap;
    min-width: 0;
}

body.page-transfers-guest .tg-who strong {
    color: #1a1a1f;
    font-weight: 600;
}

body.page-transfers-guest .tg-av {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #123;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-transfers-guest .tg-btns {
    display: flex;
    gap: 8px;
}

body.page-transfers-guest .tg-btn {
    position: relative;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    font: 600 14px 'Arimo', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

body.page-transfers-guest .tg-btn svg {
    width: 14px;
    height: 14px;
}

body.page-transfers-guest .tg-decline {
    background: #F5F5F7;
    color: #3C3C3C;
}

body.page-transfers-guest .tg-accept {
    background: #007AFF;
    color: #fff;
}

body.page-transfers-guest .tg-dl {
    background: #000;
    color: #fff;
}

body.page-transfers-guest .tg-b,
body.page-transfers-guest .tg-pa,
body.page-transfers-guest .tg-pb {
    opacity: 0;
}

body.page-transfers-guest .tg-prog {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: #EEF4FF;
}

body.page-transfers-guest .tg-prog i {
    display: block;
    height: 100%;
    background: #007AFF;
    transform-origin: left;
    transform: scaleX(0);
}

/* The cursor sits inside the button it clicks, so it lines up in every language. */
body.page-transfers-guest .tg-btn svg.tg-cursor {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 22px;
    height: 22px;
    opacity: 0;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    pointer-events: none;
    z-index: 5;
}

/* Confetti when the transfer is accepted */
body.page-transfers-guest .tg-sparks {
    position: absolute;
    right: 46px;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

body.page-transfers-guest .tg-sparks i {
    position: absolute;
    left: -3px;
    top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #79FFA1;
    opacity: 0;
    animation-name: tg-spark;
}

body.page-transfers-guest .tg-sparks i:nth-child(1) { --tx: -38px; --ty: -30px; }
body.page-transfers-guest .tg-sparks i:nth-child(2) { --tx: 30px; --ty: -34px; background: #007AFF; width: 5px; height: 5px; }
body.page-transfers-guest .tg-sparks i:nth-child(3) { --tx: 44px; --ty: 6px; }
body.page-transfers-guest .tg-sparks i:nth-child(4) { --tx: -46px; --ty: 10px; background: #007AFF; }
body.page-transfers-guest .tg-sparks i:nth-child(5) { --tx: 4px; --ty: -44px; width: 4px; height: 4px; }
body.page-transfers-guest .tg-sparks i:nth-child(6) { --tx: 12px; --ty: 30px; background: #FF9F0A; width: 5px; height: 5px; }

@keyframes tg-spark {
    0%, 39.6% {
        opacity: 0;
        transform: translate(0, 0) scale(0.4);
    }
    40.4% {
        opacity: 1;
    }
    46%, 100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1);
    }
}

/* Floating "encrypted" chip */
body.page-transfers-guest .tg-chip {
    position: absolute;
    left: 50%;
    bottom: 64px;
    z-index: 4;
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 13px;
    border-radius: 999px;
    background: #fff;
    color: #00827B;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(0, 50, 40, 0.25);
    animation: tg-bob 4.5s ease-in-out infinite;
}

body.page-transfers-guest .tg-chip svg {
    width: 16px;
    height: 16px;
}

@keyframes tg-bob {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50% { transform: translateY(-8px) rotate(1.5deg); }
}

/* Step captions under the stage, synced with the card loop */
body.page-transfers-guest .tg-steps {
    margin: 22px 6px 0;
}

body.page-transfers-guest .tg-tracks {
    display: grid;
    grid-template-columns: 22fr 33fr 45fr;
    gap: 6px;
}

body.page-transfers-guest .tg-tracks i {
    position: relative;
    height: 3px;
    border-radius: 3px;
    background: #E2E2E6;
    overflow: hidden;
}

body.page-transfers-guest .tg-tracks i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #00AE71;
    transform: scaleX(0);
    transform-origin: left;
}

body.page-transfers-guest .tg-captions {
    display: grid;
    margin-top: 14px;
}

body.page-transfers-guest .tg-captions p {
    grid-area: 1 / 1;
    font-size: 16px;
    line-height: 1.45;
    color: #3C3C43;
    opacity: 0;
}

body.page-transfers-guest .tg-captions .tg-cap1 {
    opacity: 1;
}

/* ── Demo timing ── */
body.page-transfers-guest .tg-mini,
body.page-transfers-guest .tg-mini *,
body.page-transfers-guest .tg-bar-count,
body.page-transfers-guest .tg-num b,
body.page-transfers-guest .tg-tracks i::after,
body.page-transfers-guest .tg-captions p {
    animation-duration: 13s;
    animation-iteration-count: infinite;
    animation-delay: 0.9s;
    animation-fill-mode: both;
    animation-play-state: paused;
}

body.page-transfers-guest .tg-demo.is-playing .tg-mini,
body.page-transfers-guest .tg-demo.is-playing .tg-mini *,
body.page-transfers-guest .tg-demo.is-playing .tg-bar-count,
body.page-transfers-guest .tg-demo.is-playing .tg-num b,
body.page-transfers-guest .tg-demo.is-playing .tg-tracks i::after,
body.page-transfers-guest .tg-demo.is-playing .tg-captions p {
    animation-play-state: running;
}

body.page-transfers-guest .tg-c1 { animation-name: tg-life1; }
body.page-transfers-guest .tg-c2 { animation-name: tg-life2; }
body.page-transfers-guest .tg-c3 { animation-name: tg-life3; }
body.page-transfers-guest .tg-c1 .tg-cursor { animation-name: tg-cur1; }
body.page-transfers-guest .tg-c2 .tg-cursor { animation-name: tg-cur2; }
body.page-transfers-guest .tg-c1 .tg-decline { animation-name: tg-decline; }
body.page-transfers-guest .tg-c2 .tg-accept { animation-name: tg-press; }
body.page-transfers-guest .tg-c2 .tg-a { animation-name: tg-a; }
body.page-transfers-guest .tg-c2 .tg-b { animation-name: tg-b; }
body.page-transfers-guest .tg-c2 .tg-fileicon { animation-name: tg-pop2; }
body.page-transfers-guest .tg-c3 .tg-prog { animation-name: tg-progwrap; }
body.page-transfers-guest .tg-c3 .tg-prog i { animation-name: tg-fill; }
body.page-transfers-guest .tg-c3 .tg-ps { animation-name: tg-ps; }
body.page-transfers-guest .tg-c3 .tg-pa { animation-name: tg-pa; }
body.page-transfers-guest .tg-c3 .tg-pb { animation-name: tg-pb; }
body.page-transfers-guest .tg-c3 .tg-fileicon { animation-name: tg-pop3; }
body.page-transfers-guest .tg-bar-count { animation-name: tg-bump; }
body.page-transfers-guest .tg-t1::after { animation-name: tg-track1; }
body.page-transfers-guest .tg-t2::after { animation-name: tg-track2; }
body.page-transfers-guest .tg-t3::after { animation-name: tg-track3; }
body.page-transfers-guest .tg-cap1 { animation-name: tg-cap1; }
body.page-transfers-guest .tg-cap2 { animation-name: tg-cap2; }
body.page-transfers-guest .tg-cap3 { animation-name: tg-cap3; }
body.page-transfers-guest .tg-n2 { animation-name: tg-n2; }
body.page-transfers-guest .tg-n1 { animation-name: tg-n1; opacity: 0; }
body.page-transfers-guest .tg-n0 { animation-name: tg-n0; opacity: 0; }

/* Cursor paths, relative to the button they click */
@keyframes tg-cur1 {
    0%, 5% {
        opacity: 0;
        transform: translate(64px, 52px);
    }
    8% {
        opacity: 1;
        transform: translate(52px, 40px);
    }
    14.6%, 15.2% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    16% {
        opacity: 1;
        transform: scale(0.8);
    }
    17.6% {
        opacity: 1;
        transform: scale(1);
    }
    20% {
        opacity: 1;
        transform: translate(8px, 12px);
    }
    21%, 100% {
        opacity: 0;
        transform: translate(16px, 24px);
    }
}

@keyframes tg-cur2 {
    0%, 27.5% {
        opacity: 0;
        transform: translate(64px, 52px);
    }
    30.5% {
        opacity: 1;
        transform: translate(52px, 40px);
    }
    36.5%, 37.1% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    37.9% {
        opacity: 1;
        transform: scale(0.8);
    }
    39.5% {
        opacity: 1;
        transform: scale(1);
    }
    42%, 100% {
        opacity: 0;
        transform: translate(8px, 12px);
    }
}

/* Each step owns the stretch of the loop where its card is in front:
   declined 0–22.4%, accepted 22.4–55.4%, sent 55.4–97% */
@keyframes tg-track1 {
    0% { transform: scaleX(0); }
    22.4% { transform: scaleX(1); }
    97%, 100% { transform: scaleX(1); opacity: 1; }
}

@keyframes tg-track2 {
    0%, 22.4% { transform: scaleX(0); }
    55.4% { transform: scaleX(1); }
    100% { transform: scaleX(1); }
}

@keyframes tg-track3 {
    0%, 55.4% { transform: scaleX(0); }
    97%, 100% { transform: scaleX(1); }
}

@keyframes tg-cap1 {
    0%, 21.4% { opacity: 1; transform: none; }
    23%, 97.5% { opacity: 0; transform: translateY(-6px); }
    97.6% { opacity: 0; transform: translateY(6px); }
    99.5%, 100% { opacity: 1; transform: none; }
}

@keyframes tg-cap2 {
    0%, 22.4% { opacity: 0; transform: translateY(6px); }
    24%, 54.4% { opacity: 1; transform: none; }
    56%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes tg-cap3 {
    0%, 55.4% { opacity: 0; transform: translateY(6px); }
    57%, 96.5% { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* Pending counter: 2 → 1 (declined) → 0 (accepted) → back to 2 when the loop restarts */
@keyframes tg-bump {
    0%, 17.2%, 19.6%, 39.1%, 41.5%, 100% { transform: none; }
    18.2%, 40.1% { transform: scale(1.12); }
}

@keyframes tg-n2 {
    0%, 16.8% {
        opacity: 1;
        transform: none;
    }
    18.4%, 98.6% {
        opacity: 0;
        transform: translateY(-100%);
    }
    98.7% {
        opacity: 0;
        transform: translateY(100%);
    }
    99.8%, 100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes tg-n1 {
    0%, 16.8% {
        opacity: 0;
        transform: translateY(100%);
    }
    18.4%, 38.9% {
        opacity: 1;
        transform: none;
    }
    40.5%, 100% {
        opacity: 0;
        transform: translateY(-100%);
    }
}

@keyframes tg-n0 {
    0%, 38.9% {
        opacity: 0;
        transform: translateY(100%);
    }
    40.5%, 98.6% {
        opacity: 1;
        transform: none;
    }
    99.8%, 100% {
        opacity: 0;
        transform: translateY(-100%);
    }
}

@keyframes tg-life1 {
    0% {
        opacity: 1;
        transform: none;
        z-index: 3;
    }
    20.8% {
        opacity: 1;
        transform: none;
        z-index: 3;
        animation-timing-function: cubic-bezier(.25,.8,.35,1);
    }
    22.4% {
        opacity: .2;
        transform: translateY(-30px) scale(.975);
        z-index: 4;
        animation-timing-function: cubic-bezier(.25,.8,.35,1);
    }
    24% {
        opacity: 0;
        transform: translateY(-44px) scale(.96);
        z-index: 4;
    }
    24.1% {
        opacity: 0;
        transform: translateY(22px) scale(.88);
        z-index: 1;
        animation-timing-function: ease-out;
    }
    27% {
        opacity: .3;
        transform: translateY(22px) scale(.88);
        z-index: 1;
    }
    55.4% {
        opacity: .3;
        transform: translateY(22px) scale(.88);
        z-index: 1;
        animation-timing-function: cubic-bezier(.34,1.3,.64,1);
    }
    59.2% {
        opacity: .55;
        transform: translateY(12px) scale(.94);
        z-index: 2;
    }
    95.4% {
        opacity: .55;
        transform: translateY(12px) scale(.94);
        z-index: 2;
        animation-timing-function: cubic-bezier(.34,1.3,.64,1);
    }
    99.6%, 100% {
        opacity: 1;
        transform: none;
        z-index: 3;
    }
}

@keyframes tg-life2 {
    0% {
        opacity: .55;
        transform: translateY(12px) scale(.94);
        z-index: 2;
    }
    22.3% {
        opacity: .55;
        transform: translateY(12px) scale(.94);
        z-index: 2;
        animation-timing-function: cubic-bezier(.34,1.3,.64,1);
    }
    26.2% {
        opacity: 1;
        transform: none;
        z-index: 3;
    }
    53.8% {
        opacity: 1;
        transform: none;
        z-index: 3;
        animation-timing-function: cubic-bezier(.25,.8,.35,1);
    }
    55.4% {
        opacity: .2;
        transform: translateY(-30px) scale(.975);
        z-index: 4;
        animation-timing-function: cubic-bezier(.25,.8,.35,1);
    }
    57% {
        opacity: 0;
        transform: translateY(-44px) scale(.96);
        z-index: 4;
    }
    57.1% {
        opacity: 0;
        transform: translateY(22px) scale(.88);
        z-index: 1;
        animation-timing-function: ease-out;
    }
    60% {
        opacity: .3;
        transform: translateY(22px) scale(.88);
        z-index: 1;
    }
    95.4% {
        opacity: .3;
        transform: translateY(22px) scale(.88);
        z-index: 1;
        animation-timing-function: cubic-bezier(.34,1.3,.64,1);
    }
    99.6%, 100% {
        opacity: .55;
        transform: translateY(12px) scale(.94);
        z-index: 2;
    }
}

@keyframes tg-life3 {
    0% {
        opacity: .3;
        transform: translateY(22px) scale(.88);
        z-index: 1;
    }
    22.3% {
        opacity: .3;
        transform: translateY(22px) scale(.88);
        z-index: 1;
        animation-timing-function: cubic-bezier(.34,1.3,.64,1);
    }
    26.2% {
        opacity: .55;
        transform: translateY(12px) scale(.94);
        z-index: 2;
    }
    55.4% {
        opacity: .55;
        transform: translateY(12px) scale(.94);
        z-index: 2;
        animation-timing-function: cubic-bezier(.34,1.3,.64,1);
    }
    59.2% {
        opacity: 1;
        transform: none;
        z-index: 3;
    }
    95.4% {
        opacity: 1;
        transform: none;
        z-index: 3;
        animation-timing-function: cubic-bezier(.25,.8,.35,1);
    }
    96.9% {
        opacity: .2;
        transform: translateY(-30px) scale(.975);
        z-index: 4;
        animation-timing-function: cubic-bezier(.25,.8,.35,1);
    }
    98.2% {
        opacity: 0;
        transform: translateY(-44px) scale(.96);
        z-index: 4;
    }
    98.3% {
        opacity: 0;
        transform: translateY(22px) scale(.88);
        z-index: 1;
        animation-timing-function: ease-out;
    }
    100% {
        opacity: .3;
        transform: translateY(22px) scale(.88);
        z-index: 1;
    }
}

@keyframes tg-decline {
    0%, 15% {
        background: #F5F5F7;
        color: #3C3C3C;
        transform: none;
    }
    16% {
        background: #F5F5F7;
        color: #3C3C3C;
        transform: scale(.9);
    }
    17.6%, 23.8% {
        background: #FFE9E7;
        color: #D70015;
        transform: none;
    }
    24%, 100% {
        background: #F5F5F7;
        color: #3C3C3C;
        transform: none;
    }
}

@keyframes tg-press {
    0%, 37% {
        transform: none;
    }
    37.9% {
        transform: scale(.9);
        background: #0068D6;
    }
    39.5%, 100% {
        transform: none;
    }
}

@keyframes tg-a {
    0%, 39.5% {
        opacity: 1;
        transform: none;
    }
    42.5%, 100% {
        opacity: 0;
        transform: translateY(-6px) scale(.96);
    }
}

@keyframes tg-b {
    0%, 41% {
        opacity: 0;
        transform: translateY(7px) scale(.96);
    }
    45%, 100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes tg-pop2 {
    0%, 41% {
        transform: none;
    }
    43.5% {
        transform: scale(1.12);
    }
    47%, 100% {
        transform: none;
    }
}

@keyframes tg-progwrap {
    0%, 60.5% {
        opacity: 1;
    }
    73%, 100% {
        opacity: 0;
    }
}

@keyframes tg-fill {
    0%, 60.5% {
        transform: scaleX(0);
    }
    71.5%, 100% {
        transform: scaleX(1);
    }
}

@keyframes tg-ps {
    0%, 71% {
        opacity: 1;
        transform: none;
    }
    73%, 100% {
        opacity: 0;
        transform: translateY(-6px) scale(.96);
    }
}

@keyframes tg-pa {
    0%, 71.5% {
        opacity: 0;
        transform: translateY(7px) scale(.96);
    }
    74%, 85.5% {
        opacity: 1;
        transform: none;
    }
    88%, 100% {
        opacity: 0;
        transform: translateY(-6px) scale(.96);
    }
}

@keyframes tg-pb {
    0%, 86.5% {
        opacity: 0;
        transform: translateY(7px) scale(.96);
    }
    90%, 100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes tg-pop3 {
    0%, 88% {
        transform: none;
    }
    91% {
        transform: scale(1.12);
    }
    95%, 100% {
        transform: none;
    }
}

/* Big screens: give the demo more room */
@media (min-width: 1600px) {
    body.page-transfers-guest .tg-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
    }

    body.page-transfers-guest .tg-layout {
        max-width: 1480px;
    }

    body.page-transfers-guest .tg-stage {
        height: 560px;
    }

    body.page-transfers-guest .tg-deck {
        bottom: 186px;
    }

    body.page-transfers-guest .tg-points {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
        max-width: none;
    }

    body.page-transfers-guest .tg-points li {
        flex-direction: column;
        gap: 12px;
    }
}

/* Sticky CTA (mobile only, shown once the main button scrolls away) */
body.page-transfers-guest .tg-sticky {
    display: none;
}

@media (max-width: 960px) {
    body.page-transfers-guest .tg-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "demo"
            "points";
        max-width: 580px;
        row-gap: 44px;
    }

    body.page-transfers-guest .tg-copy {
        text-align: center;
    }

    body.page-transfers-guest .tg-desc {
        margin-left: auto;
        margin-right: auto;
    }

    body.page-transfers-guest .tg-points {
        max-width: none;
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    body.page-transfers-guest .main-content {
        padding: 22px 16px 36px;
    }

    body.page-transfers-guest .tg-layout {
        row-gap: 26px;
    }

    body.page-transfers-guest .tg-title {
        font-size: clamp(34px, 10vw, 44px);
    }

    body.page-transfers-guest .tg-desc {
        margin-top: 16px;
        font-size: 16px;
    }

    body.page-transfers-guest .tg-cta {
        margin-top: 26px;
        width: 100%;
        height: 54px;
        padding: 0 18px;
        font-size: 16.5px;
    }

    body.page-transfers-guest .tg-stage {
        height: 360px;
        border-radius: 26px;
    }

    body.page-transfers-guest .tg-star {
        width: 280px;
        height: 280px;
        right: -90px;
        top: -110px;
    }

    body.page-transfers-guest .tg-bar {
        top: 20px;
        left: 20px;
        right: 20px;
    }

    body.page-transfers-guest .tg-bar-title {
        font-size: 21px;
    }

    body.page-transfers-guest .tg-deck {
        left: 14px;
        right: 14px;
        bottom: 104px;
    }

    body.page-transfers-guest .tg-mini {
        border-radius: 16px;
        padding: 15px 14px 20px;
    }

    body.page-transfers-guest .tg-fileicon {
        width: 42px;
        height: 42px;
    }

    body.page-transfers-guest .tg-name {
        font-size: 15px;
    }

    body.page-transfers-guest .tg-foot-row {
        margin-top: 12px;
        padding-top: 12px;
        min-height: 34px;
    }

    body.page-transfers-guest .tg-btn {
        height: 34px;
        padding: 0 12px;
        font-size: 13.5px;
    }

    body.page-transfers-guest .tg-points {
        padding-top: 24px;
    }

    body.page-transfers-guest .tg-steps {
        margin: 18px 4px 0;
    }

    body.page-transfers-guest .tg-captions p {
        font-size: 15px;
        text-align: center;
    }

    body.page-transfers-guest .tg-chip {
        bottom: 34px;
        font-size: 13px;
        padding: 9px 14px 9px 12px;
    }

    body.page-transfers-guest .tg-sticky {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;
        padding: 20px 16px calc(14px + env(safe-area-inset-bottom));
        background: linear-gradient(to bottom, rgba(245, 245, 247, 0), #F5F5F7 45%);
        transform: translateY(110%);
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
    }

    body.page-transfers-guest .tg-sticky.is-shown {
        transform: none;
        visibility: visible;
        transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1), visibility 0s;
    }
}

/* Narrow phones: drop the "from"/"to" label and the check icon so the buttons fit */
@media (max-width: 400px) {
    body.page-transfers-guest .tg-who-lbl,
    body.page-transfers-guest .tg-accept > svg:not(.tg-cursor) {
        display: none;
    }

    body.page-transfers-guest .tg-row {
        gap: 10px;
    }

    body.page-transfers-guest .tg-btns {
        gap: 6px;
    }

    body.page-transfers-guest .tg-btn {
        padding: 0 10px;
        font-size: 13px;
    }

    body.page-transfers-guest .tg-pill {
        font-size: 11.5px;
        padding: 5px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-transfers-guest .tg-s,
    body.page-transfers-guest .tg-stage,
    body.page-transfers-guest .tg-glow,
    body.page-transfers-guest .tg-star,
    body.page-transfers-guest .tg-chip,
    body.page-transfers-guest .tg-cta::after,
    body.page-transfers-guest .tg-mini,
    body.page-transfers-guest .tg-mini *,
    body.page-transfers-guest .tg-bar-count,
    body.page-transfers-guest .tg-num b,
    body.page-transfers-guest .tg-tracks i::after,
    body.page-transfers-guest .tg-captions p {
        animation: none !important;
    }

    body.page-transfers-guest .tg-sticky {
        transition: none !important;
    }

    body.page-transfers-guest .tg-points li > svg * {
        animation: none !important;
        stroke-dashoffset: 0;
    }
}

/* ── 404 page ── */
body.page-404 .nf-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 60px;
}

body.page-404 .nf-card {
    width: 100%;
    max-width: 520px;
    background: #FFFFFF;
    border-radius: 27px;
    padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
    text-align: center;
    animation: blurReveal 0.8s cubic-bezier(0.05, 0.7, 0.1, 1) backwards;
}

body.page-404 .nf-code {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 800;
    font-size: clamp(72px, 16vw, 112px);
    line-height: 1;
    color: #000000;
    margin-bottom: 20px;
}

body.page-404 .nf-zero {
    color: #00AE71;
}

body.page-404 .nf-label {
    font-weight: 510;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6E6E73;
    margin: 0 0 8px;
}

body.page-404 .nf-title {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 5vw, 34px);
    color: #000000;
    margin: 0 0 12px;
}

body.page-404 .nf-text {
    font-size: 17px;
    line-height: 1.45;
    color: #6E6E73;
    margin: 0 auto 32px;
    max-width: 400px;
}

body.page-404 .nf-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

body.page-404 .nf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 28px;
    border-radius: 15px;
    font-weight: 510;
    font-size: 17px;
    text-decoration: none;
    transition: opacity 0.2s ease, background 0.2s ease;
}

body.page-404 .nf-btn-primary {
    background: #00827B;
    color: #FFFFFF;
}

body.page-404 .nf-btn-primary:hover {
    opacity: 0.9;
}

body.page-404 .nf-btn-outline {
    color: #000000;
    border: 2px solid #00827B;
}

body.page-404 .nf-btn-outline:hover {
    background: rgba(0, 130, 123, 0.05);
}

@media (max-width: 480px) {
    body.page-404 .nf-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-404 .nf-card {
        animation: none;
    }
}