:root { color-scheme: light; --ink:#162238; --muted:#667085; --line:#e4e8ef; --brand:#1264f5; --brand-dark:#0b4ec9; --soft:#f5f8ff; --danger:#b42318; --success:#087443; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:#f7f9fc; } button, input, textarea, select { font:inherit; } button, a { -webkit-tap-highlight-color:transparent; } .page-shell { width:min(100% - 32px, 640px); margin:auto; padding:28px 0 44px; } .hero { padding:16px 8px 22px; text-align:center; } .brand-mark { display:grid; place-items:center; width:48px; height:48px; margin:auto; border-radius:16px; color:white; background:linear-gradient(135deg,#1b72ff,#7046e8); font-size:27px; font-weight:800; } .eyebrow { margin:14px 0 8px; color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.18em; } h1 { margin:0; font-size:clamp(28px,8vw,42px); line-height:1.13; letter-spacing:-.04em; } .hero-copy { margin:14px 0 0; color:var(--muted); font-size:14px; line-height:1.7; } .card { margin:12px 0; padding:20px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 8px 28px rgba(20,39,76,.04); } .section-heading { display:flex; gap:12px; align-items:flex-start; } .section-heading.compact { margin-bottom:18px; } .step { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; color:var(--brand); background:#eaf2ff; font-size:13px; font-weight:800; } h2 { margin:0 0 5px; font-size:19px; } p { margin:0; line-height:1.55; } .section-heading p, .hint, .muted { color:var(--muted); font-size:13px; } .upload-button, .primary-button { display:flex; justify-content:center; align-items:center; width:100%; min-height:50px; border:0; border-radius:13px; color:#fff; background:var(--brand); font-weight:750; text-decoration:none; cursor:pointer; transition:background .2s, transform .2s; } .upload-button { margin-top:20px; background:var(--soft); color:var(--brand); border:1px dashed #9dbcf8; } button:not(:disabled):active, .primary-button:active { transform:translateY(1px); } .primary-button:hover { background:var(--brand-dark); } .primary-button:disabled { color:#98a2b3; background:#edf0f4; cursor:not-allowed; } .hint { margin-top:10px; } .video-details { margin-top:18px; } video { display:block; width:100%; max-height:260px; border-radius:12px; background:#101828; } .file-row, .price-line, .check-row { display:flex; align-items:center; gap:12px; } .file-row { justify-content:space-between; margin-top:12px; } .file-row strong { display:block; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .text-button { padding:6px 0; border:0; color:var(--brand); background:transparent; font-size:13px; cursor:pointer; white-space:nowrap; } .check-row { align-items:flex-start; cursor:pointer; } .check-row input { flex:none; width:19px; height:19px; margin:1px 0 0; accent-color:var(--brand); } .check-row span { line-height:1.45; } .check-row small { display:block; color:var(--muted); font-size:12px; } textarea { display:block; width:100%; margin-top:16px; padding:13px; border:1px solid var(--line); border-radius:12px; resize:vertical; color:var(--ink); } .price-line { justify-content:space-between; padding:11px 0; color:var(--muted); border-bottom:1px solid var(--line); } .price-line strong { color:var(--ink); } .price-line.total { border-bottom:0; font-size:16px; } .price-line.total strong { font-size:28px; } .authorization-row { margin:18px 0; font-size:13px; } .error { margin-top:12px; padding:11px 12px; border-radius:10px; color:var(--danger); background:#fff1f0; font-size:13px; } .status-card { text-align:center; } .status-card h2 { margin:10px 0 8px; } .status-card p { margin-bottom:16px; } .status-icon { display:grid; place-items:center; width:48px; height:48px; margin:auto; border-radius:50%; color:var(--brand); background:#eaf2ff; font-size:24px; font-weight:800; } .status-icon.success { color:var(--success); background:#e8f7ef; } .status-icon.failed { color:var(--danger); background:#fff1f0; } .spin { animation:pulse 1.2s infinite; } @keyframes pulse { 50% { opacity:.45; transform:scale(.94); } } .progress { height:8px; margin:20px 0 8px; overflow:hidden; border-radius:8px; background:#e9eef7; } .progress span { display:block; width:0; height:100%; border-radius:8px; background:var(--brand); transition:width .2s; } .result-video { margin:18px 0 12px; } .status-actions { display:grid; gap:9px; } .secondary-button { display:flex; justify-content:center; align-items:center; min-height:46px; border:1px solid #b8cdf7; border-radius:12px; color:var(--brand); text-decoration:none; font-weight:700; } .telegram-card { display:flex; align-items:center; gap:12px; margin:18px 0 12px; padding:16px; border-radius:16px; background:#eaf2ff; } .telegram-card > div:nth-child(2) { flex:1; } .telegram-card strong { display:block; font-size:13px; } .telegram-card p { color:var(--muted); font-size:12px; } .telegram-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#fff; background:#4b8bd8; font-weight:900; } .telegram-icon.connected { background:#16a36b; } .demo-tools { display:flex; justify-content:space-between; align-items:center; margin:24px 4px; color:var(--muted); font-size:12px; } .demo-tools select { padding:7px 9px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:#fff; } footer { display:flex; justify-content:center; gap:10px; color:#98a2b3; font-size:12px; } footer a { color:var(--brand); text-decoration:none; } .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (min-width:700px) { .page-shell { padding-top:48px; } .card { padding:24px; } }