/* ══════════════════════════════════════════════════════════════════════ SwiftDrop — design system Dark-first, with a light theme driven by [data-theme] on . ══════════════════════════════════════════════════════════════════════ */ :root { /* Brand ramp */ --brand-1: #6366f1; --brand-2: #8b5cf6; --brand-3: #06b6d4; --brand-grad: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 50%, var(--brand-3) 100%); --brand-grad-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(6, 182, 212, 0.14)); /* Semantic */ --ok: #10b981; --warn: #f59e0b; --danger: #f43f5e; --info: #38bdf8; /* Dark surfaces */ --bg: #07080e; --bg-2: #0b0d16; --surface: rgba(255, 255, 255, 0.035); --surface-2: rgba(255, 255, 255, 0.06); --surface-3: rgba(255, 255, 255, 0.09); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); /* Text */ --text: #f2f4f8; --text-2: #a8b0c2; --text-3: #6c7489; /* Effects */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6); --shadow-lg: 0 32px 64px -16px rgba(0, 0, 0, 0.7); --glow: 0 0 0 1px rgba(139, 92, 246, 0.25), 0 8px 40px -8px rgba(99, 102, 241, 0.4); --blur: saturate(160%) blur(18px); /* Geometry */ --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --maxw: 1140px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } [data-theme='light'] { --bg: #f6f7fb; --bg-2: #eef0f7; --surface: rgba(255, 255, 255, 0.75); --surface-2: rgba(255, 255, 255, 0.95); --surface-3: #ffffff; --border: rgba(15, 23, 42, 0.1); --border-strong: rgba(15, 23, 42, 0.18); --text: #0f172a; --text-2: #4a5568; --text-3: #8792a8; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.18); --shadow-lg: 0 32px 64px -20px rgba(15, 23, 42, 0.22); --glow: 0 0 0 1px rgba(99, 102, 241, 0.2), 0 8px 40px -12px rgba(99, 102, 241, 0.35); } /* ── reset ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 4px; } ::selection { background: rgba(139, 92, 246, 0.35); } /* Ambient gradient field. Fixed + blurred so it never costs a repaint. */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .aurora::before, .aurora::after { content: ''; position: absolute; width: 60vw; height: 60vw; min-width: 480px; min-height: 480px; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; } .aurora::before { top: -22vw; left: -14vw; background: radial-gradient(circle, rgba(99, 102, 241, 0.55), transparent 68%); animation: drift-a 24s var(--ease-in-out) infinite alternate; } .aurora::after { bottom: -26vw; right: -16vw; background: radial-gradient(circle, rgba(6, 182, 212, 0.42), transparent 68%); animation: drift-b 30s var(--ease-in-out) infinite alternate; } [data-theme='light'] .aurora::before { opacity: 0.35; } [data-theme='light'] .aurora::after { opacity: 0.3; } @keyframes drift-a { to { transform: translate3d(12vw, 8vh, 0) scale(1.15); } } @keyframes drift-b { to { transform: translate3d(-10vw, -8vh, 0) scale(1.1); } } /* ── layout ──────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .page { display: flex; flex-direction: column; min-height: 100vh; } .page > main { flex: 1 0 auto; } /* ── header ──────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; } .logo { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; } .logo__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-grad); box-shadow: 0 4px 16px -4px rgba(99, 102, 241, 0.7); } .logo__mark svg { width: 19px; height: 19px; } .nav { display: flex; align-items: center; gap: 4px; } .nav a { padding: 8px 14px; border-radius: var(--r-pill); font-size: 0.9rem; color: var(--text-2); transition: color 0.18s, background 0.18s; } .nav a:hover { color: var(--text); background: var(--surface-2); } .icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); cursor: pointer; transition: border-color 0.18s, background 0.18s, transform 0.18s; } .icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); } .icon-btn:active { transform: scale(0.94); } .icon-btn svg { width: 17px; height: 17px; } .theme-toggle .moon { display: none; } [data-theme='light'] .theme-toggle .moon { display: block; } [data-theme='light'] .theme-toggle .sun { display: none; } /* ── hero ────────────────────────────────────────────────────────────── */ .hero { padding: 68px 0 28px; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; margin-bottom: 22px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font-size: 0.8rem; color: var(--text-2); } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } } .hero h1 { margin: 0 0 16px; font-size: clamp(2.1rem, 6vw, 3.8rem); line-height: 1.05; letter-spacing: -0.045em; font-weight: 800; } .grad-text { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lede { max-width: 620px; margin: 0 auto; font-size: clamp(1rem, 2.2vw, 1.16rem); color: var(--text-2); } .trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px; font-size: 0.86rem; color: var(--text-3); } .trust-row span { display: inline-flex; align-items: center; gap: 7px; } .trust-row svg { width: 15px; height: 15px; color: var(--ok); flex: none; } /* ── card ────────────────────────────────────────────────────────────── */ .card { position: relative; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-lg); } .card--main { max-width: 780px; margin: 8px auto 0; padding: 12px; } /* ── dropzone ────────────────────────────────────────────────────────── */ .dropzone { position: relative; display: grid; place-items: center; padding: 56px 28px; border: 2px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--brand-grad-soft); text-align: center; cursor: pointer; transition: border-color 0.22s var(--ease), background 0.22s, transform 0.22s var(--ease); } .dropzone:hover { border-color: var(--brand-2); } .dropzone.is-dragover { border-color: var(--brand-3); transform: scale(1.012); box-shadow: var(--glow); } .dropzone__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 20px; background: var(--brand-grad); box-shadow: 0 12px 32px -8px rgba(99, 102, 241, 0.65); transition: transform 0.3s var(--ease); } .dropzone:hover .dropzone__icon { transform: translateY(-4px) scale(1.04); } .dropzone__icon svg { width: 28px; height: 28px; color: #fff; } .dropzone h2 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; } .dropzone p { margin: 0; font-size: 0.92rem; color: var(--text-2); } .dropzone .browse { color: var(--brand-2); font-weight: 600; } .dropzone__meta { margin-top: 16px; font-size: 0.78rem; color: var(--text-3); } /* ── file list ───────────────────────────────────────────────────────── */ .filelist { max-height: 320px; overflow-y: auto; padding: 4px; margin: 12px 0 0; list-style: none; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .filelist::-webkit-scrollbar { width: 8px; } .filelist::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } .fileitem { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); margin-bottom: 8px; animation: slide-in 0.32s var(--ease) both; } @keyframes slide-in { from { opacity: 0; transform: translateY(8px); } } .fileitem__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-3); color: var(--text-2); } .fileitem__icon svg { width: 18px; height: 18px; } .fileitem__icon img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; } .fileitem__body { flex: 1; min-width: 0; } .fileitem__name { font-size: 0.9rem; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fileitem__sub { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--text-3); } .fileitem__bar { height: 3px; margin-top: 7px; border-radius: 2px; background: var(--surface-3); overflow: hidden; } .fileitem__bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--brand-grad); transition: width 0.25s var(--ease); } .fileitem.is-done .fileitem__bar i { background: var(--ok); } .fileitem.is-error { border-color: rgba(244, 63, 94, 0.5); } .fileitem.is-error .fileitem__bar i { background: var(--danger); } .fileitem__remove { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer; transition: background 0.16s, color 0.16s; } .fileitem__remove:hover { background: rgba(244, 63, 94, 0.14); color: var(--danger); } .fileitem__remove svg { width: 15px; height: 15px; } /* ── form controls ───────────────────────────────────────────────────── */ .field { margin-bottom: 14px; } .field label, .field-label { display: block; margin-bottom: 7px; font-size: 0.82rem; font-weight: 600; color: var(--text-2); letter-spacing: 0.01em; } .input, .textarea, .select { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); color: var(--text); font-size: 0.93rem; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .input::placeholder, .textarea::placeholder { color: var(--text-3); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18); } .textarea { resize: vertical; min-height: 78px; } .select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b0c2' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Collapsible advanced options */ .options { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 6px; } .options__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 4px; border: 0; background: none; color: var(--text-2); font-size: 0.88rem; font-weight: 600; cursor: pointer; } .options__toggle:hover { color: var(--text); } .options__toggle svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); } .options[open] .options__toggle svg, .options.is-open .options__toggle svg { transform: rotate(180deg); } .options__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); } .options.is-open .options__body { grid-template-rows: 1fr; } .options__body > div { overflow: hidden; } .options.is-open .options__body > div { padding: 6px 4px 12px; } /* ── buttons ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--r); background: var(--surface-2); color: var(--text); font-size: 0.94rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: transform 0.16s var(--ease), box-shadow 0.2s, background 0.2s, opacity 0.2s; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(0.985); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; } .btn svg { width: 17px; height: 17px; flex: none; } .btn--primary { background: var(--brand-grad); color: #fff; box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.8); } .btn--primary:hover:not(:disabled) { box-shadow: 0 14px 36px -8px rgba(99, 102, 241, 0.9); } .btn--ghost { background: transparent; border-color: var(--border); color: var(--text-2); } .btn--ghost:hover { background: var(--surface-2); color: var(--text); } .btn--danger { background: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.35); color: #fb7185; } .btn--danger:hover { background: rgba(244, 63, 94, 0.2); } .btn--block { width: 100%; } .btn--lg { padding: 15px 28px; font-size: 1rem; } .btn .spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── progress panel ──────────────────────────────────────────────────── */ .progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .progress-pct { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .progress-stats { display: flex; gap: 16px; font-size: 0.82rem; color: var(--text-2); font-variant-numeric: tabular-nums; } .progress-track { height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; } .progress-track i { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--brand-grad); background-size: 200% 100%; transition: width 0.3s var(--ease); animation: shimmer 2.2s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } /* ── result / share ──────────────────────────────────────────────────── */ .success-mark { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; background: rgba(16, 185, 129, 0.14); color: var(--ok); animation: pop 0.45s var(--ease) both; } .success-mark svg { width: 30px; height: 30px; } @keyframes pop { from { transform: scale(0.6); opacity: 0; } } .linkbox { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface-2); } .linkbox input { flex: 1; min-width: 0; border: 0; background: none; font-family: var(--mono); font-size: 0.88rem; outline: none; } .share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); font-size: 0.85rem; font-weight: 550; color: var(--text-2); cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.16s; } .share-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); } .share-btn svg { width: 15px; height: 15px; } .qr-wrap { display: grid; place-items: center; padding: 16px; margin-top: 14px; border: 1px solid var(--border); border-radius: var(--r); background: #fff; } .qr-wrap svg { width: 168px; height: 168px; } /* ── meta strip ──────────────────────────────────────────────────────── */ .meta-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; margin: 18px 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--border); overflow: hidden; } .meta-strip div { padding: 13px 14px; background: var(--surface-2); } .meta-strip dt { margin: 0 0 3px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); } .meta-strip dd { margin: 0; font-size: 0.95rem; font-weight: 650; font-variant-numeric: tabular-nums; } /* ── features ────────────────────────────────────────────────────────── */ .section { padding: 72px 0; } .section__head { text-align: center; margin-bottom: 44px; } .section__head h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 780; letter-spacing: -0.035em; } .section__head p { margin: 0; color: var(--text-2); } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; } .feature { padding: 26px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: transform 0.28s var(--ease), border-color 0.28s, box-shadow 0.28s; } .feature:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); } .feature__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 15px; border-radius: 12px; background: var(--brand-grad-soft); color: var(--brand-2); border: 1px solid var(--border); } .feature__icon svg { width: 20px; height: 20px; } .feature h3 { margin: 0 0 7px; font-size: 1.02rem; font-weight: 680; } .feature p { margin: 0; font-size: 0.89rem; color: var(--text-2); } /* ── steps ───────────────────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; counter-reset: step; } .step { position: relative; padding-top: 8px; } .step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; background: var(--brand-grad); color: #fff; font-weight: 700; font-size: 0.92rem; box-shadow: 0 6px 18px -6px rgba(99, 102, 241, 0.8); } .step h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 680; } .step p { margin: 0; font-size: 0.89rem; color: var(--text-2); } /* ── stats band ──────────────────────────────────────────────────────── */ .statband { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; padding: 30px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); text-align: center; } .statband b { display: block; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .statband span { font-size: 0.82rem; color: var(--text-3); } /* ── faq ─────────────────────────────────────────────────────────────── */ .faq { max-width: 780px; margin: 0 auto; } .faq details { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); margin-bottom: 10px; overflow: hidden; } .faq summary { padding: 17px 20px; font-weight: 620; font-size: 0.96rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg) translateY(-2px); transition: transform 0.25s var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); } .faq details p { margin: 0; padding: 0 20px 18px; color: var(--text-2); font-size: 0.91rem; } /* ── footer ──────────────────────────────────────────────────────────── */ .site-footer { margin-top: 60px; padding: 34px 0; border-top: 1px solid var(--border); color: var(--text-3); font-size: 0.85rem; } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; } .site-footer a:hover { color: var(--text); } /* ── toasts ──────────────────────────────────────────────────────────── */ .toasts { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 40px)); } .toast { display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--bg-2); box-shadow: var(--shadow-lg); font-size: 0.88rem; animation: toast-in 0.32s var(--ease) both; } .toast.is-leaving { animation: toast-out 0.24s var(--ease-in-out) both; } .toast svg { width: 17px; height: 17px; flex: none; margin-top: 2px; } .toast--ok svg { color: var(--ok); } .toast--error svg { color: var(--danger); } .toast--info svg { color: var(--info); } @keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } } @keyframes toast-out { to { opacity: 0; transform: translateX(24px); } } /* ── modal ───────────────────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(4, 5, 10, 0.72); backdrop-filter: blur(6px); animation: fade-in 0.2s ease both; } .modal[hidden] { display: none; } @keyframes fade-in { from { opacity: 0; } } .modal__panel { width: 100%; max-width: 460px; padding: 26px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--bg-2); box-shadow: var(--shadow-lg); animation: pop-in 0.28s var(--ease) both; } @keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } } .modal__panel h3 { margin: 0 0 6px; font-size: 1.18rem; font-weight: 720; } .modal__panel > p { margin: 0 0 18px; color: var(--text-2); font-size: 0.9rem; } .modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } /* ── helpers ─────────────────────────────────────────────────────────── */ .center { text-align: center; } .muted { color: var(--text-2); } .small { font-size: 0.84rem; } .mono { font-family: var(--mono); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 18px; } .mt-3 { margin-top: 28px; } .mb-0 { margin-bottom: 0; } .row { display: flex; gap: 10px; align-items: center; } .row--between { justify-content: space-between; } .row--wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 0.74rem; font-weight: 620; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); } .badge--ok { color: var(--ok); border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.1); } .badge--warn { color: var(--warn); border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.1); } .badge--danger { color: var(--danger); border-color: rgba(244, 63, 94, 0.35); background: rgba(244, 63, 94, 0.1); } .badge--lock { color: var(--brand-2); border-color: rgba(139, 92, 246, 0.35); background: rgba(139, 92, 246, 0.1); } .skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: sk 1.4s ease-in-out infinite; color: transparent; } @keyframes sk { to { background-position: -200% 0; } } /* ── responsive ──────────────────────────────────────────────────────── */ @media (max-width: 720px) { .wrap { padding: 0 16px; } .hero { padding: 44px 0 20px; } .grid-2 { grid-template-columns: 1fr; } .nav a { display: none; } .nav a.always { display: inline-flex; } .section { padding: 52px 0; } .dropzone { padding: 40px 18px; } .progress-pct { font-size: 1.9rem; } .toasts { left: 16px; right: 16px; max-width: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } @media print { .aurora, .site-header, .site-footer, .toasts { display: none !important; } body { background: #fff; color: #000; } }