/* CS-TOP API — документация.
   Палитра, шкала и фоновый орнамент взяты с cs-top.uz один в один: API —
   часть того же сайта, и выглядеть должен так же. Токены продублированы, а
   не подключены из style.css: там 759 КБ на весь движок, документации из них
   нужен один экран. */
:root {
  --bg:            #121417;
  --card-bg:       #1a1d22;
  --bg-section:    #22262c;
  --bg-elevated:   #22262c;
  --bg-2:          #2a2f36;
  --text:          #eef0f3;
  --text-muted:    #a7adb7;
  --text-soft:     #6c7380;
  --border:        #2c3139;
  --border-strong: #3a4049;
  --accent:        #3b8ded;
  --accent-hover:  #5a9ff0;
  --accent-soft:   rgba(59, 141, 237, 0.12);
  --on-accent:     #ffffff;
  --accent-2:      #f0a836;
  --success:       #3ecf8e;
  --success-soft:  rgba(62, 207, 142, 0.14);
  --danger:        #e5484d;
  --danger-soft:   rgba(229, 72, 77, 0.14);

  --radius:    8px;
  --radius-lg: 14px;
  --radius-sm: 4px;
  --control:   40px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px;
  --fs-100: 11px; --fs-200: 12px; --fs-300: 13px; --fs-400: 14px;
  --fs-500: 16px; --fs-600: 18px; --fs-700: 22px; --fs-800: 28px;
  --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28);
  --transition: .15s ease;

  --uzor-size: 96px;
  --uzor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.25 127.4' fill='none' stroke='rgba(255,255,255,0.045)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M90.6 139.5 L101.7 127.4 L90.6 114.7'/%3E%3Cpath d='M127.4 113.3 L130.4 119.2 L136.8 117.2 L134.8 123.6 L140.7 126.6 L134.8 129.7 L136.8 136.1 L130.4 134.1 L127.4 140 L124.3 134.1 L117.9 136.1 L119.9 129.7 L114 126.6 L119.9 123.6 L117.9 117.2 L124.3 119.2 L127.4 113.3 Z'/%3E%3Cpath d='M128 101.6 L142.1 112.5 L153 126.6 L142.1 140.8 L128 151.6 L113.9 140.8 L103 126.6 L113.9 112.5 L128 101.6 Z'/%3E%3Cpath d='M115.7 90.5 L128 101.6 L139 90.5'/%3E%3Cpath d='M63.6 50.3 L66.6 56.3 L73 54.2 L71 60.6 L76.9 63.7 L71 66.8 L73 73.2 L66.6 71.1 L63.6 77.1 L60.5 71.1 L54.1 73.2 L56.1 66.8 L50.2 63.7 L56.1 60.6 L54.1 54.2 L60.5 56.3 L63.6 50.3 Z'/%3E%3Cpath d='M0.1 113.3 L3.2 119.2 L9.6 117.2 L7.5 123.6 L13.5 126.6 L7.5 129.7 L9.6 136.1 L3.2 134.1 L0.1 140 L-3 134.1 L-9.4 136.1 L-7.3 129.7 L-13.3 126.6 L-7.3 123.6 L-9.4 117.2 L-3 119.2 L0.1 113.3 Z'/%3E%3Cpath d='M63.6 38.9 L71.1 45.4 L81.1 46.2 L81.9 56.1 L88.3 63.7 L81.9 71.3 L81.1 81.2 L71.1 82 L63.6 88.5 L56 82 L46 81.2 L45.2 71.3 L38.8 63.7 L45.2 56.1 L46 46.2 L56 45.4 L63.6 38.9 Z'/%3E%3Cpath d='M25.5 38.9 L33.1 45.4 L43.1 46.2 L43.9 56.1 L50.3 63.7 L43.9 71.3 L43.1 81.2 L33.1 82 L25.5 88.5 L17.9 82 L8 81.2 L7.2 71.3 L0.8 63.7 L7.2 56.1 L8 46.2 L17.9 45.4 L25.5 38.9 Z'/%3E%3Cpath d='M63.6 0.8 L71.1 7.2 L81.1 8 L81.9 17.9 L88.3 25.5 L81.9 33.1 L81.1 43.1 L71.1 43.9 L63.6 50.3 L56 43.9 L46 43.1 L45.2 33.1 L38.8 25.5 L45.2 17.9 L46 8 L56 7.2 L63.6 0.8 Z'/%3E%3Cpath d='M101.7 38.9 L109.3 45.4 L119.2 46.2 L120 56.1 L126.5 63.7 L120 71.3 L119.2 81.2 L109.3 82 L101.7 88.5 L94.1 82 L84.2 81.2 L83.4 71.3 L76.9 63.7 L83.4 56.1 L84.2 46.2 L94.1 45.4 L101.7 38.9 Z'/%3E%3Cpath d='M63.6 77.1 L71.1 83.5 L81.1 84.3 L81.9 94.3 L88.3 101.9 L81.9 109.4 L81.1 119.4 L71.1 120.2 L63.6 126.6 L56 120.2 L46 119.4 L45.2 109.4 L38.8 101.9 L45.2 94.3 L46 84.3 L56 83.5 L63.6 77.1 Z'/%3E%3Cpath d='M36.6 12.1 L44.2 18.6 L54.1 19.4 L54.9 29.3 L61.4 36.9 L54.9 44.5 L54.1 54.4 L44.2 55.2 L36.6 61.7 L29 55.2 L19.1 54.4 L18.3 44.5 L11.8 36.9 L18.3 29.3 L19.1 19.4 L29 18.6 L36.6 12.1 Z'/%3E%3Cpath d='M90.6 12.1 L98.2 18.6 L108.1 19.4 L108.9 29.3 L115.4 36.9 L108.9 44.5 L108.1 54.4 L98.2 55.2 L90.6 61.7 L83 55.2 L73.1 54.4 L72.3 44.5 L65.8 36.9 L72.3 29.3 L73.1 19.4 L83 18.6 L90.6 12.1 Z'/%3E%3Cpath d='M36.6 65.7 L44.2 72.2 L54.1 73 L54.9 82.9 L61.4 90.5 L54.9 98.1 L54.1 108 L44.2 108.8 L36.6 115.3 L29 108.8 L19.1 108 L18.3 98.1 L11.8 90.5 L18.3 82.9 L19.1 73 L29 72.2 L36.6 65.7 Z'/%3E%3Cpath d='M90.6 65.7 L98.2 72.2 L108.1 73 L108.9 82.9 L115.4 90.5 L108.9 98.1 L108.1 108 L98.2 108.8 L90.6 115.3 L83 108.8 L73.1 108 L72.3 98.1 L65.8 90.5 L72.3 82.9 L73.1 73 L83 72.2 L90.6 65.7 Z'/%3E%3Cpath d='M0.8 101.6 L14.9 112.5 L25.8 126.6 L14.9 140.8 L0.8 151.6 L-13.4 140.8 L-24.2 126.6 L-13.4 112.5 L0.8 101.6 Z'/%3E%3Cpath d='M-11.6 90.5 L0.8 101.6 L11.8 90.5'/%3E%3Cpath d='M36.6 115.3 L25.8 126.6 L36.6 140.1'/%3E%3Cpath d='M90.6 12.1 L101.7 0 L90.6 -12.7'/%3E%3Cpath d='M115.4 36.9 L127.2 23.1 L139.4 36.9'/%3E%3Cpath d='M-11.9 36.9 L0 23.1 L12.2 36.9'/%3E%3Cpath d='M127.4 -14.1 L130.4 -8.2 L136.8 -10.2 L134.8 -3.8 L140.7 -0.8 L134.8 2.3 L136.8 8.7 L130.4 6.7 L127.4 12.6 L124.3 6.7 L117.9 8.7 L119.9 2.3 L114 -0.8 L119.9 -3.8 L117.9 -10.2 L124.3 -8.2 L127.4 -14.1 Z'/%3E%3Cpath d='M128 -25.8 L142.1 -14.9 L153 -0.8 L142.1 13.4 L128 24.2 L113.9 13.4 L103 -0.8 L113.9 -14.9 L128 -25.8 Z'/%3E%3Cpath d='M0.1 -14.1 L3.2 -8.2 L9.6 -10.2 L7.5 -3.8 L13.5 -0.8 L7.5 2.3 L9.6 8.7 L3.2 6.7 L0.1 12.6 L-3 6.7 L-9.4 8.7 L-7.3 2.3 L-13.3 -0.8 L-7.3 -3.8 L-9.4 -10.2 L-3 -8.2 L0.1 -14.1 Z'/%3E%3Cpath d='M0.8 -25.8 L14.9 -14.9 L25.8 -0.8 L14.9 13.4 L0.8 24.2 L-13.4 13.4 L-24.2 -0.8 L-13.4 -14.9 L0.8 -25.8 Z'/%3E%3Cpath d='M36.6 -12.1 L25.8 -0.8 L36.6 12.7'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  font: var(--fs-400)/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* тот же узор, что на cs-top.uz */
  background: var(--uzor) 0 0 / var(--uzor-size) var(--uzor-size) fixed, var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ── шапка: как на cs-top.uz ── */
.hd { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-6); background: rgba(18,20,23,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); }
.hd__brand { font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -.02em; color: var(--text); }
.hd__brand:hover { text-decoration: none; }
.hd__brand span { color: var(--accent); margin-left: 6px; }
.hd__ver { padding: 2px var(--s-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--text-soft); }
.hd__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.hd__site { font-size: var(--fs-300); color: var(--text-muted); }
.lang { display: flex; gap: 2px; background: var(--bg-section); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 3px; }
.lang__b { padding: 4px var(--s-3); border-radius: var(--radius-sm); font-size: var(--fs-300); color: var(--text-muted); }
.lang__b.is-on { background: var(--accent); color: var(--on-accent); }
.lang__b:hover { text-decoration: none; color: var(--text); }

/* ── раскладка ── */
.wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--s-8);
  max-width: 1200px; margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-12); }
.side { position: sticky; top: 76px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.side__i { padding: 7px var(--s-3); border-radius: var(--radius); color: var(--text-muted); font-size: var(--fs-400); }
.side__i:hover { background: var(--bg-section); color: var(--text); text-decoration: none; }

/* ── текст ── */
.sec { margin-bottom: var(--s-12); scroll-margin-top: 84px; }
h1 { margin: 0 0 var(--s-2); font-size: var(--fs-800); letter-spacing: -.02em; }
h2 { margin: 0 0 var(--s-5); font-size: var(--fs-700); letter-spacing: -.01em; }
h3 { margin: var(--s-6) 0 var(--s-2); font-size: var(--fs-500); }
h4 { margin: 0 0 var(--s-1); font-size: var(--fs-500); }
.lead { margin: 0 0 var(--s-5); color: var(--text-muted); font-size: var(--fs-500); max-width: 64ch; }
.note { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--accent-2);
  background: var(--bg-section); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-muted); font-size: var(--fs-300); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); margin: var(--s-5) 0; }
.card { padding: var(--s-4); background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card b { display: block; margin-bottom: var(--s-1); font-size: var(--fs-100); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-soft); }
.card code, .card span { font-size: var(--fs-400); color: var(--text); }

.code { margin: var(--s-3) 0; padding: var(--s-4); background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow-x: auto; font-size: var(--fs-300); color: #c6d0dd; white-space: pre; }

/* ── эндпоинт ── */
.ep { margin-bottom: var(--s-4); padding: var(--s-5); background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.ep__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); flex-wrap: wrap; }
.ep__m { padding: 3px 9px; border-radius: var(--radius-sm); background: var(--success-soft);
  color: var(--success); font-size: var(--fs-200); font-weight: var(--fw-bold); letter-spacing: .04em; }
.ep__p { font-size: var(--fs-400); color: var(--text); }
.ep__d { margin: 0 0 var(--s-4); color: var(--text-muted); font-size: var(--fs-400); }

.par { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-4); font-size: var(--fs-300); }
.par th { padding: var(--s-2) var(--s-3); text-align: left; font-size: var(--fs-100); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-soft); border-bottom: 1px solid var(--border); }
.par td { padding: 9px var(--s-3); border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: top; }
.par tr:last-child td { border-bottom: 0; }
.par code { color: var(--accent); font-size: var(--fs-300); }
.par__t { color: var(--text-soft); }

/* ── песочница ── */
.try { padding: var(--s-3); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.try__row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.try__pre { font-size: var(--fs-200); color: var(--text-soft); white-space: nowrap; }
.try__in { flex: 1 1 260px; min-width: 0; height: var(--control); padding: 0 var(--s-3);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: inherit; font-size: var(--fs-300); }
.try__in:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.try__go { height: var(--control); padding: 0 var(--s-5); border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent); font-family: inherit; font-size: var(--fs-400);
  font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--transition); }
.try__go:hover { background: var(--accent-hover); }
.try__go:disabled { opacity: .6; cursor: default; }
.try__copy { height: var(--control); padding: 0 var(--s-4); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-section); color: var(--text-muted);
  font-family: inherit; font-size: var(--fs-300); cursor: pointer; }
.try__copy:hover { color: var(--text); border-color: var(--border-strong); }

.res { margin-top: var(--s-3); }
.res[hidden] { display: none; }
.res__bar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-2); font-size: var(--fs-200); color: var(--text-soft); }
.res__code { padding: 2px var(--s-2); border-radius: var(--radius-sm); font-weight: var(--fw-bold); }
.res__code.is-ok { background: var(--success-soft); color: var(--success); }
.res__code.is-bad { background: var(--danger-soft); color: var(--danger); }
.res__body { margin: 0; padding: var(--s-4); background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); max-height: 420px; overflow: auto;
  font-size: var(--fs-300); line-height: 1.5; color: #c6d0dd; white-space: pre; }
/* подсветка: ключи, строки, числа — как в консоли браузера */
.js-k { color: #7fb3ff; } .js-s { color: #9ad9a0; } .js-n { color: #f0a836; } .js-b { color: #e5484d; }

.ft { display: flex; gap: var(--s-5); flex-wrap: wrap; padding-top: var(--s-5);
  border-top: 1px solid var(--border); color: var(--text-soft); font-size: var(--fs-300); }

@media (max-width: 860px) {
  .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) var(--s-4) var(--s-8); }
  .side { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--s-1);
    padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); }
  .side__i { background: var(--bg-section); border: 1px solid var(--border); }
  h1 { font-size: var(--fs-700); }
  .hd { padding: var(--s-2) var(--s-4); }
  .hd__site { display: none; }
}