/* ============================================================
   Khan SAT-1600 · Лаборатория «Наука» и каталог идей (v149)
   Author: Xudoyorxon Bunyodov / Худоёрхон Бунёдов
   ============================================================ */
.sci, .sci-homecard, .sci-studio {
  --sc-g: #1B5E20; --sc-gold: #C9A227; --sc-blue: #1565C0; --sc-red: #C62828;
  --sc-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --sc-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}
.sci { max-width: 1280px; margin: 0 auto; padding: 2px 0 44px; font-family: var(--sc-sans); }
.sci *, .sci *::before, .sci *::after { box-sizing: border-box; }
.sci-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sci-top h1 { margin: 0; font-size: 23px; color: inherit; }
.sci-back { color: var(--sc-g); font-weight: 600; text-decoration: none; }
html[data-theme="dark"] .sci-back { color: #A5D6A7; }
.sci-badge { background: #eef5ee; color: var(--sc-g); border-radius: 10px; padding: 3px 11px; font-size: 12.5px; font-weight: 700; }
.sci-idea { background: #fff5d9; color: #8a6d00; border-radius: 10px; padding: 3px 11px; font-size: 12.5px; font-weight: 600; }
.sci-count { font-size: 13px; color: #6c7a6e; align-self: center; }

.sci-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: center; background: #fff; color: #1a1a1a; border: 1.5px solid #dfe6df; border-radius: 20px; padding: 24px 28px; margin-bottom: 16px; }
.sci-kicker { color: var(--sc-g); font-weight: 700; font-size: 13.5px; }
.sci-hero h1 { font-size: 28px; margin: 5px 0 10px; color: #1a1a1a; }
.sci-hero p { color: #3c463d; line-height: 1.6; margin: 0 0 14px; font-size: 15px; }
.sci-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sci-stats span { display: flex; flex-direction: column; background: #f2f7f2; border-radius: 12px; padding: 8px 14px; font-size: 12.5px; color: #4a574c; }
.sci-stats b { font-size: 19px; color: var(--sc-g); }
.sci-hero-act { display: flex; gap: 9px; flex-wrap: wrap; }
.sci-hero-cv { width: 100%; height: 260px; border-radius: 14px; border: 1.5px solid #e3e9e3; background: #fff; display: block; }

.sci-filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.sci-filters input, .sci-filters select { border: 1.5px solid #cfd8cf; border-radius: 10px; padding: 9px 12px; font: 14px var(--sc-sans); background: #fff; color: #1a1a1a; }
.sci-filters input { flex: 1 1 280px; min-width: 200px; }
.sci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 13px; }
.sci-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1.5px solid #dfe6df; border-radius: 16px; padding: 15px 17px; text-decoration: none; color: #1a1a1a; transition: transform .15s, border-color .15s; }
.sci-card:hover { transform: translateY(-2px); border-color: var(--sc-g); }
.sci-card-sec { font-size: 11.5px; font-weight: 700; color: var(--sc-g); text-transform: uppercase; letter-spacing: .3px; }
.sci-card b { font-size: 15.5px; line-height: 1.3; }
.sci-card-f { font-family: var(--sc-mono); font-size: 12px; color: #6c7a6e; }
.sci-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.sci-tags i { font-style: normal; font-size: 11.5px; background: #f2f7f2; color: #4a574c; border-radius: 8px; padding: 2px 8px; }
.sci-none { background: #fff; border: 1.5px dashed #cfd8cf; border-radius: 14px; padding: 22px; color: #5b675c; text-align: center; }

.sci-work { display: grid; grid-template-columns: minmax(360px, 1fr) 330px; gap: 16px; align-items: start; }
.sci-cv { width: 100%; height: 420px; border: 1.5px solid #dfe6df; border-radius: 16px; background: #fff; display: block; }
.sci-plot { width: 100%; height: 190px; border: 1.5px solid #dfe6df; border-radius: 14px; background: #fff; display: block; margin-top: 10px; }
.sci-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.sci-btn { border: 1.5px solid #cfd8cf; background: #fff; color: #1a1a1a !important; border-radius: 10px; padding: 8px 13px; font: 600 13.5px var(--sc-sans); cursor: pointer; text-decoration: none !important; }
.sci-btn:hover { border-color: var(--sc-g); background: #f2f7f2; }
.sci-btn-p { background: var(--sc-g); border-color: var(--sc-g); color: #fff !important; }
.sci-btn-p:hover { background: #164a1a; }
.sci-speed { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6c7a6e; }
.sci-speed input { width: 96px; accent-color: #1B5E20; }
.sci-time { font-size: 13px; color: #27352a; font-variant-numeric: tabular-nums; margin-left: auto; }
.sci-side { display: flex; flex-direction: column; gap: 12px; }
.sci-panel { background: #fff; border: 1.5px solid #dfe6df; border-radius: 16px; padding: 14px 16px; }
.sci-panel h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #7b877c; }
.sci-p { display: grid; grid-template-columns: 1fr 58px; gap: 4px 8px; align-items: center; margin-bottom: 10px; font-size: 12.5px; color: #45514a; }
.sci-p span { grid-column: 1 / -1; }
.sci-p input { width: 100%; accent-color: #1B5E20; }
.sci-p b { text-align: right; font-size: 13px; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.sci-facts { display: flex; flex-direction: column; gap: 6px; }
.sci-fact { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; border-bottom: 1px dashed #eef1ee; padding-bottom: 5px; }
.sci-fact span { color: #5b675c; }
.sci-fact b { color: #1a1a1a; text-align: right; }
.sci-formula div { font-family: var(--sc-mono); font-size: 13px; color: #27352a; background: #f6f9f6; border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; }

/* дорожная карта */
.sci-road-intro { background: #fff; border: 1.5px solid #dfe6df; border-left: 5px solid var(--sc-g); border-radius: 14px; padding: 14px 18px; font-size: 14.5px; line-height: 1.6; color: #27352a; margin-bottom: 14px; }
.sci-doms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sci-dom { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1.5px solid #dfe6df; border-radius: 14px; padding: 11px 13px; cursor: pointer; text-align: left; font-family: var(--sc-sans); }
.sci-dom.on { border-color: var(--sc-g); background: #f3f8f3; }
.sci-dom b { font-size: 14.5px; color: #1a1a1a; }
.sci-dom span { font-size: 12px; color: #6c7a6e; }
.sci-dom i { display: block; height: 6px; border-radius: 3px; background: #e7ece7; overflow: hidden; }
.sci-dom u { display: block; height: 100%; background: var(--sc-g); }
.sci-road { display: flex; flex-direction: column; gap: 6px; }
.sci-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1.5px solid #e7ece7; border-radius: 12px; padding: 9px 13px; }
.sci-item.done { border-color: #a8d5aa; background: #f6fbf6; }
.sci-item b { color: #9aa79c; font-size: 13px; font-variant-numeric: tabular-nums; }
.sci-item.done b { color: var(--sc-g); }
.sci-item span { font-size: 14px; color: #27352a; }
.sci-item i { display: block; font-style: normal; font-size: 11.5px; color: #9aa79c; margin-top: 2px; }
.sci-open { background: var(--sc-g); color: #fff !important; border-radius: 9px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; text-decoration: none !important; }
.sci-wait { font-size: 12px; color: #9aa79c; }

.sci-homecard { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; background: #fff; color: #1a1a1a; border: 1.5px solid #dfe6df; border-left: 6px solid #1565C0; border-radius: 18px; padding: 18px 22px; font-family: var(--sc-sans); }
.sci-homecard span { color: #1565C0; font-weight: 700; font-size: 13.5px; }
.sci-homecard b { display: block; font-size: 19px; margin: 3px 0 4px; }
.sci-homecard p { margin: 0; color: #45514a; font-size: 14px; max-width: 760px; }
.sci-homeact { display: flex; gap: 9px; flex-wrap: wrap; }
.topnav a.sci-navlink { font-weight: 700; }

.sci-studio { display: grid; grid-template-columns: minmax(320px, 1.6fr) minmax(230px, 1fr); gap: 14px; align-items: start; font-family: var(--sc-sans); }
.sci-studio .sci-cv { height: 340px; }

html[data-theme="dark"] .sci .sci-hero, html[data-theme="dark"] .sci .sci-card,
html[data-theme="dark"] .sci .sci-panel, html[data-theme="dark"] .sci .sci-item,
html[data-theme="dark"] .sci .sci-dom, html[data-theme="dark"] .sci .sci-road-intro { background: #fff; color: #1a1a1a; }

@media (max-width: 1000px) {
  .sci-work { grid-template-columns: 1fr; }
  .sci-hero { grid-template-columns: 1fr; }
  .sci-hero-cv { height: 200px; }
  .sci-studio { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sci-cv { height: 320px; }
  .sci-item { grid-template-columns: 34px 1fr; }
  .sci-item .sci-open, .sci-item .sci-wait { grid-column: 2; justify-self: start; }
}
/* инструменты: пунктирная отметка «закрывает близкий инструмент» */
.sci-item.near { border-color: #e6cf8f; background: #fffdf5; border-style: dashed; }
.sci-item.near b { color: #8a6d00; }
.sci-open.near { background: #C9A227; color: #1a1a1a !important; }
.sci-p select, .sci-p input[type="text"], .sci-p input[type="number"] { font: 14px var(--sc-sans); color: #1a1a1a; background: #fff; }
/* переключатель достижимости в дорожной карте */
.sci-scope { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sci-scope button {
  border: 1.5px solid #cfd8cf; background: #fff; color: #1a1a1a; border-radius: 20px;
  padding: 7px 15px; font: 600 13.5px var(--sc-sans); cursor: pointer;
}
.sci-scope button.on { border-color: var(--sc-g); background: #eef5ee; color: var(--sc-g); }
.sci-wait.sci-out { color: #8a6d00; background: #fff8e1; border-radius: 9px; padding: 3px 9px; font-size: 11.5px; }
/* текст задания под снимком (Milliy sertifikat) */
.nc-text { margin: 12px auto 0; max-width: 760px; text-align: left; background: #f7faf7; border: 1.5px solid #e2e8e2; border-radius: 12px; padding: 10px 14px; }
.nc-text summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: #1B5E20; }
.nc-text p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #27352a; }
.nc-text .nc-note { font-size: 12px; color: #7b877c; }