:root { --цвет-текста:#242529; --цвет-вторичного:#72737a; --цвет-границы:#dedee2; --цвет-акцента:#ed1c24; --цвет-фона:#fff; --цвет-подложки:#f7f7f8; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--цвет-текста); background:var(--цвет-фона); }
* { box-sizing:border-box; }
body { margin:0; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.рабочая-область { width:min(100% - 48px,1060px); margin:0 auto; }
.заголовок-сервиса { display:flex; gap:18px; padding:28px 0 26px; align-items:flex-start; }
.знак-сервиса { display:flex; align-items:center; justify-content:center; width:58px; height:58px; flex:none; border-radius:16px; background:var(--цвет-акцента); color:#fff; font-size:32px; font-weight:800; line-height:1; letter-spacing:-.08em; }
.знак-сервиса span { color:#fff; }
.метка-сервиса { margin:0 0 8px; font-size:13px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.метка-сервиса span { color:var(--цвет-вторичного); font-weight:500; text-transform:none; letter-spacing:0; }
h1 { margin:0; font-size:clamp(28px,4vw,34px); letter-spacing:-.04em; line-height:1.15; font-weight:760; }
.пояснение { max-width:650px; margin:8px 0 0; color:var(--цвет-вторичного); font-size:16px; line-height:1.45; }
.панель-извлечения { padding:24px; border:1px solid var(--цвет-границы); border-radius:18px; box-shadow:0 12px 42px rgba(30,30,35,.05); }
.форма-ссылки label,.заголовок-результата label { display:block; margin-bottom:12px; font-size:15px; font-weight:700; }
.строка-ввода { display:flex; gap:10px; }
.строка-ввода input { min-width:0; flex:1; height:54px; padding:0 16px; border:1px solid var(--цвет-границы); border-radius:9px; outline:none; background:#fff; }
.строка-ввода input:focus,.поле-описания:focus { border-color:var(--цвет-текста); box-shadow:0 0 0 3px rgba(36,37,41,.08); }
.строка-ввода input::placeholder,.поле-описания::placeholder { color:#9b9ca2; }
.кнопка-загрузки { display:flex; gap:18px; align-items:center; justify-content:space-between; min-width:194px; height:54px; padding:0 18px; border:0; border-radius:9px; background:var(--цвет-акцента); color:#fff; font-weight:700; }
.кнопка-загрузки:hover { background:#cf1420; }
.форма-ссылки[data-состояние="загружается"] .кнопка-загрузки { opacity:.7; }
.заголовок-результата { display:flex; align-items:center; justify-content:space-between; margin:24px 0 12px; }
.заголовок-результата label { margin:0; }
.кнопка-копирования { padding:8px 12px; border:1px solid var(--цвет-границы); border-radius:7px; background:#fff; font-size:14px; font-weight:650; }
.кнопка-копирования:hover:not(:disabled) { border-color:var(--цвет-текста); }
.кнопка-копирования:disabled { color:#aaa; cursor:default; }
.поле-описания { display:block; width:100%; min-height:330px; resize:vertical; padding:20px; border:1px solid var(--цвет-границы); border-radius:9px; outline:none; background:var(--цвет-подложки); color:var(--цвет-текста); line-height:1.55; font-size:16px; }
.состояние-загрузки { min-height:22px; margin:14px 0 0; color:var(--цвет-вторичного); font-size:14px; }
.состояние-загрузки[data-состояние="ошибка"] { color:#bf2631; }
.состояние-загрузки[data-состояние="готово"] { color:#28764b; }
.панель-расширения { display:grid; grid-template-columns:1fr auto; gap:8px 20px; align-items:center; margin:18px 0 0; padding:15px 18px; border:1px solid var(--цвет-границы); border-radius:12px; background:#fcfcfc; }
.сведения-расширения { display:flex; gap:17px; align-items:flex-start; }
.значок-подключения { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:11px; background:#fff0f0; color:var(--цвет-акцента); font-size:23px; }
.сведения-расширения h2 { margin:0 0 5px; font-size:17px; letter-spacing:-.02em; }
.сведения-расширения p { max-width:560px; margin:0; color:var(--цвет-вторичного); font-size:14px; line-height:1.5; }
.состояние-расширения { margin-top:8px!important; }
.состояние-расширения::before { content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#aaa; vertical-align:1px; }
.состояние-расширения[data-состояние="подключено"] { color:#28764b; }
.состояние-расширения[data-состояние="подключено"]::before { background:#28764b; }
.ссылка-скачивания { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:12px 15px; border:1px solid var(--цвет-границы); border-radius:8px; color:var(--цвет-текста); background:#fff; text-decoration:none; font-size:14px; font-weight:700; white-space:nowrap; }
.ссылка-скачивания:hover { border-color:var(--цвет-акцента); color:var(--цвет-акцента); }
.инструкция { grid-column:1/-1; border-top:1px solid var(--цвет-границы); margin-top:5px; padding-top:10px; color:var(--цвет-вторичного); font-size:14px; line-height:1.6; }
.инструкция summary { width:max-content; cursor:pointer; color:var(--цвет-текста); font-weight:650; }
.инструкция ol { padding-left:22px; }
.инструкция li { margin:6px 0; }
.инструкция code { padding:2px 4px; border-radius:3px; background:#eeeef0; color:var(--цвет-текста); }
.адреса-браузеров { display:grid; gap:8px; margin-top:8px; }
.адрес-браузера { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.адрес-браузера code { min-width:170px; }
.кнопка-копирования-адреса { padding:5px 8px; border:1px solid var(--цвет-границы); border-radius:6px; background:#fff; color:var(--цвет-текста); font-size:14px; }
.кнопка-копирования-адреса:hover { border-color:var(--цвет-текста); }
.адрес-браузера [role="status"] { margin:0; color:var(--цвет-вторичного); font-size:12px; }
.подвал-сервиса { padding:32px 0 40px; color:#a3a4a8; font-size:12px; }
.подвал-сервиса span { margin:0 6px; }
@media(max-width:700px) { .рабочая-область { width:min(100% - 28px,1060px); } .заголовок-сервиса { gap:14px; padding:35px 0 32px; } .знак-сервиса { width:42px; height:42px; border-radius:11px; font-size:25px; } .метка-сервиса { margin-bottom:15px; } .пояснение { font-size:15px; } .панель-извлечения { padding:20px; } .строка-ввода { flex-direction:column; } .кнопка-загрузки { width:100%; } .поле-описания { min-height:310px; } .панель-расширения { display:block; padding:20px; } .ссылка-скачивания { margin:20px 0 0; } .инструкция { margin-top:20px; } }