/*
 * Стили справочного сайта. Общие для всех страниц инструкций,
 * в оригинале дублировались инлайново в каждой.
 */


    @font-face{font-family:'Roboto-Regular';src:url('fonts/Roboto-Regular.ttf') format('truetype');font-display:swap;}
    @font-face{font-family:'Roboto-Medium';src:url('fonts/Roboto-Medium.ttf') format('truetype');font-display:swap;}
    @font-face{font-family:'Roboto-Bold';src:url('fonts/Roboto-Bold.ttf') format('truetype');font-display:swap;}

    :root{
      --bg:#121212; --bg2:#171718; --brand:#0083ED; --text:#EAEAEA; --muted:#A3A3A3;
      --border:#2c2c2f; --radius:16px; --maxw:1060px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    body{
      margin:0; font:16px/1.65 'Roboto-Regular', Arial, sans-serif; color:var(--text); background:var(--bg);
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-wrap:anywhere;
    }
    .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
    .topbar{position:sticky;top:0;z-index:40;backdrop-filter:saturate(120%) blur(10px);background:rgba(18,18,18,.88);border-bottom:1px solid var(--border);}
    .topbar__inner{max-width:var(--maxw);margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
    .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);}
    .brand img{width:38px;height:38px;object-fit:contain;}
    .brand__title{font:16px/1 'Roboto-Bold', Arial, sans-serif;letter-spacing:.4px;}
    .brand__subtitle{margin-top:3px;color:var(--muted);font:13px/1.2 'Roboto-Regular', Arial, sans-serif;}
    .actions{display:flex;gap:10px;flex-wrap:wrap;}
    .btn{
      display:inline-flex;align-items:center;gap:.55rem;padding:.72rem 1rem;color:var(--text);background:transparent;
      border:1px solid var(--border);border-radius:999px;text-decoration:none;font:15px/1 'Roboto-Medium', Arial, sans-serif;transition:.2s ease;outline:none;
    }
    .btn:hover{border-color:rgba(0,131,237,.55);color:var(--brand);background:rgba(0,131,237,.05);}
    .btn:focus-visible{box-shadow:0 0 0 3px rgba(0,131,237,.22);}
    main{padding:28px 16px 92px}
    .container{max-width:var(--maxw);margin:0 auto}
    h1{font:clamp(24px, 2.3vw + 12px, 40px)/1.2 'Roboto-Bold', Arial, sans-serif;margin:4px 0 10px;letter-spacing:.2px;}
    h2{font:clamp(18px,1.2vw + 12px,26px)/1.3 'Roboto-Bold', Arial, sans-serif;margin:34px 0 12px;}
    h3{font:18px/1.35 'Roboto-Bold', Arial, sans-serif;margin:18px 0 8px;color:#f0f0f0}
    p{margin:10px 0}
    a{color:var(--brand);text-decoration:none}
    .muted{color:var(--muted)}
    .lead{color:#d9d9d9;font:17px/1.7 'Roboto-Regular', Arial, sans-serif;margin:0 0 18px}
    ul,ol{padding-left:1.2rem}
    li+li{margin-top:.35rem}
    .section{margin-top:28px}
    .subnav{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px;}
    .chip{
      display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--border);
      background:#1a1a1a;color:var(--text);text-decoration:none;font:14px/1 'Roboto-Regular', Arial, sans-serif;white-space:nowrap;
    }
    .chip:hover{color:var(--brand);border-color:rgba(0,131,237,.45);}
    .badge{display:inline-block;padding:.15rem .5rem;border-radius:8px;font:12px/1.2 'Roboto-Regular', Arial, sans-serif;border:1px solid var(--border);background:#1a1a1a;color:#ddd;}
    .card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
    .block{margin:16px 0}
    .media{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#0f0f0f;}
    .media img{display:block;width:100%;height:auto;padding:10px;}
    figure{margin:0}
    figcaption{font:13px/1.5 'Roboto-Regular', Arial, sans-serif;color:var(--muted);padding:8px 10px;border-top:1px solid var(--border);background:rgba(0,0,0,.15)}
    .video{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;}
    .video video{position:absolute;inset:0;width:1000px;height:auto;display:block;object-fit:contain;border:0;}
    blockquote{
      margin:14px 0;padding:14px 16px;border-left:4px solid var(--brand);background:linear-gradient(180deg, rgba(255,255,255,.03), var(--bg2));
      border-radius:0 var(--radius) var(--radius) 0;color:#f0f7ff;
    }
    .callouts{display:grid;gap:12px}
    .callout{padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#1a1a1a;}
    .callout.info{border-color:rgba(0,131,237,.35);margin-bottom:20px;}
    .callout.warn{border-color:#a0612a;background:linear-gradient(180deg, rgba(160,97,42,.08), transparent);}
    .callout .title{font:16px/1.3 'Roboto-Bold', Arial, sans-serif;margin-bottom:4px}
    pre{background:#0f0f11;border:1px solid var(--border);border-radius:10px;padding:12px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em;}
    .codebar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
    .foot{margin-top:36px;padding-top:16px;color:var(--muted);font:14px/1.6 'Roboto-Regular', Arial, sans-serif;border-top:1px solid var(--border)}
    .two-col{display:grid;gap:14px;grid-template-columns:1.2fr .8fr;}
    @media (max-width:1100px){.video video{width:90%;height:100%;}}
    @media (max-width:980px){.two-col{grid-template-columns:1fr}}
    @media (max-width:600px){.actions{width:100%}.actions .btn{flex:1 1 auto;justify-content:center}}