/* Shared design system for the upload-first site: tokens, type, buttons, header, menu and footer. */
.upload-first {
    --uf-ink:#0d1838; --uf-ink-soft:#24314f; --uf-muted:#56637f; --uf-subtle:#7a86a0;
    --uf-blue:#2854e8; --uf-blue-hover:#1c43cc; --uf-blue-deep:#1636a6; --uf-link:#2450e0;
    --uf-page:#fff; --uf-surface:#fff; --uf-soft:#f6f8fc; --uf-softer:#fafbfe; --uf-tint:#eaf0ff; --uf-tint-strong:#d9e3ff;
    --uf-border:#e1e6f0; --uf-border-strong:#c3cee3; --uf-night:#0b1430; --uf-night-soft:#16224a;
    --uf-success:#0f7a5c; --uf-success-hover:#0b6049; --uf-success-ink:#0b4a39; --uf-success-soft:#e5f6ef; --uf-success-border:#bfe5d5;
    --uf-warn-ink:#8a4b05; --uf-warn-soft:#fff5e6; --uf-warn-border:#f5d7a6;
    --uf-danger:#c22436; --uf-danger-ink:#96202d; --uf-danger-soft:#fff1f2; --uf-danger-border:#f6c9ce;
    --uf-disabled:#e6eaf2; --uf-disabled-ink:#5d6b8c; --uf-ring:#6c8aff; --uf-video:#0b1222;
    --uf-shadow-xs:0 1px 2px #0d18380d;
    --uf-shadow:0 1px 2px #0d18380d, 0 8px 24px #0d183812;
    --uf-shadow-lg:0 2px 6px #0d18380f, 0 24px 60px #1b2f7a1f;
    --uf-radius:16px; --uf-radius-sm:12px; --uf-radius-xs:8px;
    --uf-display:"Segoe UI Variable Display","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;
    --uf-body:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Inter,Arial,sans-serif;
    --uf-max:1200px; --uf-gutter:32px;
    display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; margin:0;
    color:var(--uf-ink); background:var(--uf-page); font-family:var(--uf-body); font-size:16px; line-height:1.5;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
[data-theme=dark] .upload-first {
    --uf-ink:#edf2ff; --uf-ink-soft:#d3dcf2; --uf-muted:#b4c2df; --uf-subtle:#93a1c2; --uf-link:#a9bcff;
    --uf-page:#0b1324; --uf-surface:#141f35; --uf-soft:#111b30; --uf-softer:#0f182b; --uf-tint:#1f3060; --uf-tint-strong:#2a3d75;
    --uf-border:#26344f; --uf-border-strong:#3b4c6d; --uf-success-ink:#b7eedc; --uf-success-soft:#123e35; --uf-success-border:#1d5b4d;
    --uf-warn-ink:#ffd9a3; --uf-warn-soft:#3a2a12; --uf-warn-border:#6b4a1c;
    --uf-danger-ink:#ffc9cf; --uf-danger-soft:#3b1820; --uf-danger-border:#6d2a35; --uf-disabled:#26334d; --uf-disabled-ink:#93a1c2;
    --uf-shadow:0 1px 2px #0006, 0 8px 24px #0005; --uf-shadow-lg:0 2px 6px #0007, 0 24px 60px #0008;
}
.upload-first *, .upload-first *::before, .upload-first *::after { box-sizing:border-box; }
.upload-first [hidden] { display:none!important; }
.upload-first a { color:var(--uf-link); text-decoration:none; }
.upload-first a:hover { text-decoration:underline; text-underline-offset:3px; }
.upload-first button, .upload-first a, .upload-first select, .upload-first input, .upload-first summary, .upload-first label[for] { touch-action:manipulation; }
.upload-first button, .upload-first select, .upload-first input { font:inherit; }
.upload-first :focus-visible { outline:3px solid var(--uf-ring); outline-offset:3px; }
.upload-first h1, .upload-first h2, .upload-first h3, .upload-first p, .upload-first ul, .upload-first ol, .upload-first figure { margin:0; }
.upload-first h1, .upload-first h2, .upload-first h3 { font-family:var(--uf-display); color:var(--uf-ink); }
.upload-first :is(h1, h2)[tabindex="-1"]:focus-visible { outline:none; }
.upload-first img, .upload-first video { max-width:100%; height:auto; }
.upload-first .skip-link { position:absolute; top:-100px; inset-inline-start:16px; z-index:60; padding:12px 16px; border-radius:8px; background:var(--uf-surface); box-shadow:var(--uf-shadow); }
.upload-first .skip-link:focus { top:10px; }
.uf-container { width:100%; max-width:calc(var(--uf-max) + var(--uf-gutter) * 2); margin:0 auto; padding:0 var(--uf-gutter); }
.uf-visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Buttons */
.uf-button { display:inline-flex; min-height:48px; min-width:44px; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:12px; border:1.5px solid transparent; cursor:pointer; font-size:16px; font-weight:620; line-height:1.3; text-align:center; text-decoration:none!important; white-space:nowrap; transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s; }
.uf-button svg { width:18px; height:18px; flex:none; }
.uf-button:not(:disabled):active { transform:translateY(1px); }
.uf-button:disabled { background:var(--uf-disabled); color:var(--uf-disabled-ink)!important; border-color:var(--uf-disabled); box-shadow:none; cursor:not-allowed; }
.uf-primary { background:linear-gradient(180deg,#3461f0,var(--uf-blue)); color:#fff!important; box-shadow:0 1px 2px #1d2b5a33, inset 0 1px 0 #ffffff26; }
.uf-primary:not(:disabled):hover { background:var(--uf-blue-hover); box-shadow:0 6px 18px #2854e83d; }
.uf-outline { border-color:var(--uf-border-strong); color:var(--uf-ink)!important; background:var(--uf-surface); box-shadow:var(--uf-shadow-xs); }
.uf-outline:not(:disabled):hover { border-color:var(--uf-blue); color:var(--uf-link)!important; background:var(--uf-softer); }
.uf-quiet { color:var(--uf-link)!important; background:transparent; padding-inline:14px; }
.uf-quiet:not(:disabled):hover { background:var(--uf-soft); }
.uf-green { background:var(--uf-success); color:#fff!important; box-shadow:0 1px 2px #0b493a33; }
.uf-green:not(:disabled):hover { background:var(--uf-success-hover); box-shadow:0 6px 18px #0f7a5c38; }
.uf-green-outline { border-color:var(--uf-success); color:var(--uf-success-ink)!important; background:var(--uf-surface); box-shadow:var(--uf-shadow-xs); }
.uf-green-outline:not(:disabled):hover { border-color:var(--uf-success-hover); background:var(--uf-success-soft); }
.uf-danger-button { background:var(--uf-danger); color:#fff!important; }
.uf-danger-button:not(:disabled):hover { background:#a51d2e; }
.uf-button-lg { min-height:56px; padding:14px 28px; font-size:17px; border-radius:14px; }
.uf-button-sm { min-height:44px; padding:8px 16px; font-size:15px; border-radius:10px; }
.uf-text-button { display:inline-flex; align-items:center; gap:6px; min-height:44px; min-width:44px; padding:8px 12px; border:none; border-radius:8px; color:var(--uf-link); background:transparent; cursor:pointer; font-weight:600; }
.uf-text-button:not(:disabled):hover { background:var(--uf-tint); }
.uf-text-button:disabled { color:var(--uf-disabled-ink); cursor:not-allowed; }
.uf-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.uf-pill { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:3px 12px; border-radius:999px; background:var(--uf-tint); color:var(--uf-link); font-size:13px; font-weight:650; white-space:nowrap; }
.uf-pill.is-success { background:var(--uf-success-soft); color:var(--uf-success-ink); }
.uf-pill.is-warn { background:var(--uf-warn-soft); color:var(--uf-warn-ink); }
.uf-pill.is-danger { background:var(--uf-danger-soft); color:var(--uf-danger-ink); }
.uf-pill.is-neutral { background:var(--uf-soft); color:var(--uf-muted); border:1px solid var(--uf-border); }
.uf-kicker { display:inline-flex; align-items:center; gap:8px; color:var(--uf-link); font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

/* Header */
.uf-nav-wrap { position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--uf-page) 86%,transparent); border-bottom:1px solid var(--uf-border); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); padding-top:env(safe-area-inset-top); }
.uf-nav { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:72px; }
.uf-brand { display:flex; align-items:center; gap:10px; color:var(--uf-ink)!important; font-family:var(--uf-display); font-size:23px; font-weight:750; letter-spacing:-.4px; text-decoration:none!important; }
.uf-brand img { flex:none; width:38px; height:38px; }
.uf-nav-links { display:flex; gap:4px; align-items:center; }
.uf-nav-links a { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:10px; color:var(--uf-ink-soft); font-size:15px; font-weight:560; }
.uf-nav-links a:hover, .uf-nav-links a[aria-current=page] { color:var(--uf-ink); background:var(--uf-soft); text-decoration:none; }
.uf-nav-actions { display:flex; gap:10px; align-items:center; }
.uf-signin { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:10px; color:var(--uf-ink)!important; font-size:15px; font-weight:600; }
.uf-signin:hover { background:var(--uf-soft); text-decoration:none!important; }
.uf-header-cta { min-height:44px!important; padding:8px 18px!important; font-size:15px!important; border-radius:10px!important; }
.uf-videos-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:10px; color:var(--uf-ink)!important; font-size:15px; font-weight:600; }
.uf-videos-link:hover { background:var(--uf-soft); text-decoration:none!important; }
.uf-videos-link svg { width:18px; height:18px; color:var(--uf-muted); }

.uf-nav-cta { display:none!important; }
.uf-nav-toggle { display:none; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--uf-border); border-radius:10px; background:var(--uf-surface); color:var(--uf-ink); cursor:pointer; }
.uf-nav-toggle svg { width:22px; height:22px; }

/* Account menu */
.uf-account { position:relative; }
.uf-account-button { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:4px 10px 4px 4px; border:1px solid var(--uf-border); border-radius:999px; background:var(--uf-surface); color:var(--uf-ink); cursor:pointer; box-shadow:var(--uf-shadow-xs); }
.uf-account-button:hover, .uf-account-button[aria-expanded=true] { border-color:var(--uf-border-strong); background:var(--uf-softer); }
.uf-account-button svg { width:16px; height:16px; color:var(--uf-muted); transition:transform .15s; }
.uf-account-button[aria-expanded=true] svg { transform:rotate(180deg); }
.uf-avatar { display:inline-flex; flex:none; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#3b66f5,#6a4ff0); color:#fff; font-size:13px; font-weight:700; letter-spacing:.02em; }
.uf-avatar-lg { width:56px; height:56px; font-size:19px; }
.uf-account-panel { position:absolute; inset-inline-end:0; top:calc(100% + 10px); width:320px; padding:8px; border:1px solid var(--uf-border); border-radius:16px; background:var(--uf-surface); box-shadow:var(--uf-shadow-lg); z-index:50; }
.uf-account-head { display:flex; gap:12px; align-items:center; padding:12px; }
.uf-account-head strong { display:block; font-size:15px; overflow-wrap:anywhere; }
.uf-account-head div span { display:block; color:var(--uf-muted); font-size:13px; overflow-wrap:anywhere; }
.uf-account-plan { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 4px 6px; padding:12px; border-radius:12px; background:var(--uf-soft); font-size:14px; }
.uf-account-plan p { color:var(--uf-muted); }
.uf-account-panel nav { display:grid; padding:4px 0; border-top:1px solid var(--uf-border); }
.uf-account-panel nav a, .uf-account-panel nav button { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border:0; border-radius:10px; background:none; color:var(--uf-ink)!important; font-size:15px; font-weight:550; text-align:start; cursor:pointer; text-decoration:none!important; }
.uf-account-panel nav a:hover, .uf-account-panel nav button:hover, .uf-account-panel nav a:focus-visible { background:var(--uf-soft); }
.uf-account-panel nav svg { width:18px; height:18px; color:var(--uf-muted); flex:none; }
.uf-account-panel .uf-signout { border-top:1px solid var(--uf-border); margin-top:4px; padding-top:4px; }

/* Footer */
.uf-footer { margin-top:auto; border-top:1px solid var(--uf-border); background:var(--uf-softer); padding:56px 0 calc(28px + env(safe-area-inset-bottom)); }
.uf-footer-grid { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; }
.uf-footer-brand p { color:var(--uf-muted); font-size:15px; line-height:1.6; margin-top:14px; max-width:320px; }
.uf-footer h2 { font-family:var(--uf-body); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--uf-subtle); margin-bottom:10px; }
.uf-footer ul { list-style:none; padding:0; display:grid; }
.uf-footer li a { display:inline-flex; align-items:center; min-height:44px; color:var(--uf-ink-soft); font-size:15px; }
.uf-footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:40px; padding-top:22px; border-top:1px solid var(--uf-border); color:var(--uf-subtle); font-size:14px; }

/* Dialog */
.uf-dialog { width:min(480px,calc(100vw - 32px)); padding:0; border:1px solid var(--uf-border); border-radius:18px; background:var(--uf-surface); color:var(--uf-ink); box-shadow:var(--uf-shadow-lg); }
.uf-dialog::backdrop { background:#0b14309c; backdrop-filter:blur(2px); }
.uf-dialog form { display:grid; gap:16px; padding:28px; }
.uf-dialog h2 { font-size:22px; letter-spacing:-.3px; }
.uf-dialog p { color:var(--uf-muted); line-height:1.6; }
.uf-dialog label { display:grid; gap:8px; font-weight:600; font-size:15px; }
.uf-dialog input[type=text] { min-height:48px; padding:10px 14px; border:1px solid var(--uf-border-strong); border-radius:10px; background:var(--uf-surface); color:var(--uf-ink); font-size:16px; }
.uf-dialog .uf-actions { justify-content:flex-end; }

@media(max-width:1100px) { .uf-nav-links a { padding:0 10px; } }
@media(max-width:980px) {
    .uf-nav-toggle { display:inline-flex; } .uf-nav-links { display:none; }
    .uf-nav-links.is-open { position:absolute; top:100%; left:0; right:0; display:grid; gap:2px; padding:10px var(--uf-gutter) 18px; border-bottom:1px solid var(--uf-border); background:var(--uf-surface); box-shadow:var(--uf-shadow-lg); }
    .uf-nav-links.is-open a { min-height:48px; font-size:16px; }
    .uf-nav-links.is-open .uf-nav-cta { display:inline-flex!important; margin-top:8px; color:#fff!important; background:var(--uf-blue); }
     .uf-footer-grid { grid-template-columns:repeat(3,1fr); } .uf-footer-brand { grid-column:1/-1; }
}
@media(max-width:640px) {
    .upload-first { --uf-gutter:20px; }
    .uf-nav { min-height:64px; gap:12px; } .uf-brand { font-size:20px; gap:8px; } .uf-brand img { width:32px; height:32px; }
    .uf-header-cta { display:none!important; } .uf-videos-link span { display:none; }
    .uf-account-panel { position:fixed; left:12px; right:12px; top:calc(70px + env(safe-area-inset-top)); width:auto; }
    .uf-footer { padding-top:40px; } .uf-footer-grid { grid-template-columns:repeat(2,1fr); gap:28px 20px; }
}
@media(max-width:390px) { .upload-first { --uf-gutter:16px; } }
@media(prefers-reduced-motion:reduce) { .upload-first *, .upload-first *::before, .upload-first *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } .uf-button:not(:disabled):active { transform:none; } }