:root { --bg: #f4f5f7; --card: #ffffff; --fg: #17191c; --mut: #5d6673; --bd: #e2e5e9; --soft: #eef0f3; --acc: #1f6feb; --acc-soft: #e7f0fe; --crit: #c62828; --warn: #d9640a; --info: #1565c0; --ok: #2e7d32; --crit-bg: #fdecec; --warn-bg: #fdf1e6; --info-bg: #e8f1fb; --ok-bg: #e9f5ea; --code-bg: #0f1419; --code-fg: #d7dde4; --r: 12px; } @media (prefers-color-scheme: dark) { :root { --bg: #0f1216; --card: #171b21; --fg: #e7eaee; --mut: #98a2ae; --bd: #272d35; --soft: #1e232a; --acc: #4c8dff; --acc-soft: #182338; --crit: #ff6b6b; --warn: #ffa149; --info: #67a8ff; --ok: #5fcf73; --crit-bg: #2a1718; --warn-bg: #2a1f14; --info-bg: #14202f; --ok-bg: #15241a; --code-bg: #0a0d11; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } button, input, select { font: inherit; color: inherit; } a { color: var(--acc); } [hidden] { display: none !important; } header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--card); border-bottom: 1px solid var(--bd); position: sticky; top: 0; z-index: 5; } header .logo { width: 34px; height: 34px; flex: none; } header .brand { flex: 1; min-width: 0; } /* занимает середину — значок и RU | EN прижаты вправо */ header h1 { font-size: 18px; margin: 0; letter-spacing: -.01em; } header .sub { color: var(--mut); font-size: 13px; } header .badge { margin-left: auto; font-size: 12px; color: var(--mut); background: var(--soft); padding: 4px 10px; border-radius: 999px; white-space: nowrap; } /* переключатель языка RU | EN — виден и на телефоне; текущий язык берём из */ .lang { display: flex; flex: none; border: 1px solid var(--bd); border-radius: 999px; overflow: hidden; } .lang button { border: 0; background: none; padding: 3px 9px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--mut); cursor: pointer; } .lang button + button { border-left: 1px solid var(--bd); } .lang button:hover { color: var(--fg); } .lang button:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; } html:not([lang="en"]) .lang [data-lang="ru"], html[lang="en"] .lang [data-lang="en"] { background: var(--acc); color: #fff; cursor: default; } .layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; padding: 20px; max-width: 1400px; margin: 0 auto; } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; padding: 16px; } header .badge { display: none; } } .card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--r); } .side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .side .card { padding: 14px; } h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); margin: 0 0 10px; } .drop { border: 2px dashed var(--bd); border-radius: 10px; padding: 26px 14px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; } .drop:hover, .drop.over { border-color: var(--acc); background: var(--acc-soft); } .drop b { display: block; font-size: 16px; margin-bottom: 4px; } .drop span { color: var(--mut); font-size: 13px; } .drop svg { width: 36px; height: 36px; color: var(--acc); margin-bottom: 6px; } .opts { margin-top: 10px; font-size: 13px; color: var(--mut); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .opts input { width: 64px; padding: 4px 8px; border: 1px solid var(--bd); border-radius: 6px; background: var(--card); } .note { margin-top: 10px; font-size: 12px; color: var(--mut); } .queue { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .qi { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--soft); } .qi .row { display: flex; justify-content: space-between; gap: 8px; } .qi .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .qi .st { color: var(--mut); white-space: nowrap; } .qi.err { background: var(--crit-bg); } .qi.err .st { color: var(--crit); } .qi .msg { color: var(--crit); margin-top: 4px; overflow-wrap: anywhere; } .bar { height: 4px; background: var(--bd); border-radius: 4px; margin-top: 6px; overflow: hidden; } .bar i { display: block; height: 100%; width: 0; background: var(--acc); transition: width .2s; } .bar.busy i { width: 35%; animation: slide 1.1s infinite ease-in-out; } @keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } } .link-btn { border: 0; background: none; padding: 0; margin-top: 4px; font-size: 12px; color: var(--mut); cursor: pointer; } .link-btn:hover { color: var(--crit); } .hist { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow: auto; margin: 0 -6px; } .hi { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; } .hi:hover { background: var(--soft); } .hi.active { background: var(--acc-soft); } .hi .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hi .m { font-size: 12px; color: var(--mut); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .hi .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; } .dot { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; } .dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .dot.crit { color: var(--crit); } .dot.warn { color: var(--warn); } .dot.ok { color: var(--ok); } .empty-h { color: var(--mut); font-size: 13px; } .main { min-width: 0; scroll-margin-top: 96px; } .main.busy { opacity: .5; pointer-events: none; } .res { padding: 20px 22px; } .res-h { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .res-h > div:first-child { min-width: 0; flex: 1 1 220px; } .res-h h3 { margin: 0; font-size: 22px; letter-spacing: -.01em; overflow-wrap: anywhere; } .res-h .fw { color: var(--mut); font-size: 13px; overflow-wrap: anywhere; } .res-h .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .btn { border: 1px solid var(--bd); background: var(--card); padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; text-decoration: none; color: var(--fg); display: inline-flex; gap: 6px; align-items: center; } .btn:hover { border-color: var(--acc); } .btn:disabled { opacity: .6; cursor: default; } .btn.primary { background: var(--acc); border-color: var(--acc); color: #fff; } .btn.ghost { border-color: transparent; color: var(--mut); } .btn.ghost:hover { color: var(--crit); border-color: transparent; } .btn.small { padding: 3px 10px; font-size: 13px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; } .chip { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--mut); } .chip b { color: var(--fg); font-weight: 600; } .chip.no { background: var(--warn-bg); color: var(--warn); } .ctl { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--mut); } .ctl select, .ctl input { padding: 4px 8px; border: 1px solid var(--bd); border-radius: 6px; background: var(--card); } .ctl input { width: 60px; } .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 12px; } .tab { border: 1px solid var(--bd); background: var(--card); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 13px; } .tab.on { background: var(--fg); color: var(--bg); border-color: var(--fg); } .tab .n { opacity: .7; margin-left: 4px; } .f { border: 1px solid var(--bd); border-left: 4px solid var(--c); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--card); } .f .top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .f .lv { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c); background: var(--cb); padding: 2px 8px; border-radius: 999px; } .f .ti { font-weight: 650; } .f .ar { font-size: 12px; color: var(--mut); margin-left: auto; } .f p { margin: 6px 0 0; } .f .adv { margin-top: 8px; padding: 8px 10px; background: var(--soft); border-radius: 8px; } .f .adv b { color: var(--mut); font-weight: 600; } .fb { margin-top: 8px; font-size: 12px; color: var(--mut); display: flex; gap: 10px; align-items: center; } .fb .link-btn { margin: 0 0 0 8px; text-decoration: underline; } .fb .link-btn:hover { color: var(--acc); } .cli { position: relative; margin-top: 8px; } .cli pre { margin: 0; background: var(--code-bg); color: var(--code-fg); padding: 10px 12px; border-radius: 8px; overflow: auto; font: 13px/1.5 ui-monospace, Consolas, monospace; } .cli button { position: absolute; top: 6px; right: 6px; font-size: 12px; padding: 3px 8px; border-radius: 6px; border: 1px solid #39414b; background: #1c232b; color: #d7dde4; cursor: pointer; } .lv-crit { --c: var(--crit); --cb: var(--crit-bg); } .lv-warn { --c: var(--warn); --cb: var(--warn-bg); } .lv-info { --c: var(--info); --cb: var(--info-bg); } .lv-ok { --c: var(--ok); --cb: var(--ok-bg); } .figs h4 { margin: 22px 0 10px; font-size: 16px; } .fig { background: #fff; border: 1px solid var(--bd); border-radius: 10px; padding: 8px; margin-bottom: 12px; overflow: auto; } .fig img { display: block; max-width: 100%; height: auto; margin: 0 auto; } .welcome { padding: 28px 26px; } .welcome h3 { margin: 0 0 6px; font-size: 22px; } .welcome p { color: var(--mut); margin: 0 0 18px; max-width: 70ch; } .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .step { background: var(--soft); border-radius: 10px; padding: 14px; font-size: 14px; } .step b { display: block; margin-bottom: 4px; } .step code { font: 12px ui-monospace, Consolas, monospace; background: var(--card); padding: 1px 5px; border-radius: 4px; } .checks { columns: 2 260px; margin: 18px 0 0; padding-left: 18px; color: var(--mut); font-size: 14px; } .toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: calc(100vw - 32px); } .toast.on { opacity: 1; } .copy-area { position: fixed; top: -1000px; opacity: 0; } .plan { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: 13px; } .plan .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .plan b { color: var(--fg); } .plan .sub { color: var(--mut); margin-top: 4px; } dialog#buy { border: 1px solid var(--bd); border-radius: 14px; background: var(--card); color: var(--fg); padding: 18px 20px; width: min(460px, calc(100vw - 32px)); } dialog#buy::backdrop { background: rgba(0, 0, 0, .45); } .buy-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .buy-h h3 { margin: 0; font-size: 18px; } .prod { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--bd); border-radius: 10px; margin: 8px 0; } .prod .p { color: var(--mut); font-size: 13px; } .code { font: 600 16px ui-monospace, Consolas, monospace; letter-spacing: .04em; background: var(--soft); padding: 8px 10px; border-radius: 8px; margin: 6px 0; user-select: all; } .restore { display: flex; gap: 6px; margin-top: 10px; } .restore input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--bd); border-radius: 6px; background: var(--card); } .sandbox { background: var(--warn-bg); color: var(--warn); font-weight: 700; padding: 6px 10px; border-radius: 8px; } .manual { white-space: pre-wrap; background: var(--soft); padding: 10px; border-radius: 8px; font-size: 14px; } footer { max-width: 1400px; margin: 0 auto; padding: 4px 20px 28px; color: var(--mut); font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; } footer a { color: var(--mut); } /* страница «Конфиденциальность» */ .doc { max-width: 760px; margin: 0 auto; padding: 28px 20px 48px; } .doc h1 { font-size: 26px; margin: 0 0 16px; } .doc h2 { font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--fg); margin: 24px 0 8px; } .doc p, .doc li { color: var(--fg); }