:root { --program-green: #087853; --program-red: #c83d42; --program-black: #17212b; }
* { box-sizing: border-box; }
body.programming-page { margin: 0; min-width: 320px; color: #17212b; background: #f5f8f7; }
body.programming-page .portal-header { border-color: rgba(143, 190, 222, .16); background: rgba(5, 11, 20, .98); backdrop-filter: blur(20px); }
body.programming-page main { width: min(1880px, calc(100% - 40px)); margin: 0 auto; padding: 116px 0 54px; }
.programming-hero { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(390px, 1.2fr); align-items: end; gap: clamp(34px, 7vw, 130px); margin-bottom: 26px; }
.programming-eyebrow { color: #087853; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.programming-hero h1 { margin: 7px 0 5px; font-size: clamp(30px, 3vw, 48px); }
.programming-hero p { margin: 0; color: #66736f; font-size: 16px; }
.programming-code-search { width: min(100%, 680px); justify-self: center; }
.programming-code-search > label { display: block; margin-bottom: 8px; color: #17212b; font-size: 18px; font-weight: 800; }
.programming-code-search > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.programming-code-search input { min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid #bfcec7; border-radius: 10px; color: #183b30; background: #fff; font: 700 15px "Cascadia Code", Consolas, monospace; text-transform: uppercase; }
.programming-code-search input:focus { border-color: #58a98b; outline: 4px solid rgba(20,166,115,.1); }
.programming-code-search button { min-height: 48px; padding: 0 20px; border: 0; border-radius: 10px; color: #fff; background: #087853; font-weight: 800; cursor: pointer; }
.programming-code-search small { display: block; min-height: 20px; margin-top: 7px; color: #77847f; font-size: 12px; }
.programming-code-search small.is-error { color: #c83d42; }
.learning-progress-setting { display: grid; gap: 7px; margin: 14px 14px 6px; padding: 14px; border: 1px solid #dce6e2; border-radius: 12px; background: #fff; }
.learning-progress-setting label { color: #27352f; font-size: 14px; font-weight: 800; }
.learning-progress-setting select { min-height: 40px; border: 1px solid #cad8d3; border-radius: 9px; padding: 0 34px 0 12px; color: #17212b; background: #f8fbfa; font: inherit; }
.programming-workspace { display: grid; grid-template-columns: minmax(260px, 350px) minmax(0, 1fr); min-height: 620px; overflow: hidden; border: 1px solid #dce6e2; border-radius: 22px; background: #fff; box-shadow: 0 18px 50px rgba(28, 55, 47, .08); }
.knowledge-tree { display: flex; min-height: 620px; max-height: calc(100vh - 112px); flex-direction: column; border-right: 1px solid #cbd9d4; background: #f8fbfa; box-shadow: 12px 0 28px rgba(31, 65, 53, .055); }
.panel-heading { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 22px 16px; border-bottom: 1px solid #e4ece9; }
.panel-heading span { font-size: 20px; font-weight: 800; }
.panel-heading small { color: #80908b; font-size: 10px; letter-spacing: .14em; }
.knowledge-tree__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 24px; scrollbar-color: #9ebbb0 #edf3f1; scrollbar-width: thin; }
.knowledge-tree__body::-webkit-scrollbar { width: 9px; }.knowledge-tree__body::-webkit-scrollbar-track { background: #edf3f1; }.knowledge-tree__body::-webkit-scrollbar-thumb { border: 2px solid #edf3f1; border-radius: 999px; background: #9ebbb0; }
.knowledge-group { margin: 4px 0 8px; }
.knowledge-group__title { display: flex; width: 100%; min-height: 48px; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: #27352f; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.knowledge-group__title:hover { background: #eaf3ef; }
.knowledge-group__title:focus-visible { outline: 3px solid #087853; outline-offset: 2px; }
.knowledge-group__title::before { content: ''; display: block; width: 28px; height: 28px; flex: 0 0 28px; background: #245e47; clip-path: polygon(18% 29%, 82% 29%, 50% 71%); }
.knowledge-group.is-collapsed .knowledge-group__title::before { transform: rotate(-90deg); }
.knowledge-group.is-collapsed .knowledge-group__items { display: none; }
.knowledge-group__items { display: grid; gap: 3px; padding-left: 14px; }
.knowledge-item { width: 100%; padding: 10px 13px; border: 0; border-radius: 9px; background: transparent; color: #52605b; font: inherit; text-align: left; cursor: pointer; }
.knowledge-item:hover { background: #eaf3ef; color: #087853; }
.knowledge-item.is-active { background: #dff1e9; color: #086c4c; font-weight: 800; }
.problem-panel { min-width: 0; padding: 26px 30px 34px; }
.problem-panel__header { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 2px solid #17212b; }
.problem-panel__header span { color: #087853; font-size: 12px; font-weight: 800; letter-spacing: .13em; }
.problem-panel__header h2 { margin: 5px 0 0; font-size: 24px; }
.problem-panel__header p { margin: 0; color: #71807a; font-size: 14px; }
.problem-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 58px; padding-top: 10px; background: none; }
.programming-problem { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 9px 10px; border: 0; border-bottom: 1px solid #e6ecea; background: #fff; color: var(--program-black); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.programming-problem:hover { background: #f4f8f6; }
.programming-problem.is-correct { color: var(--program-green); }
.programming-problem.is-wrong { color: var(--program-red); }
.programming-problem__code { font-weight: 800; font-variant-numeric: tabular-nums; }
.programming-problem__title { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.programming-problem__stars { color: #ff8a00; font-size: 15px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; }
.problem-empty, .loading-copy { margin: 0; padding: 34px 12px; color: #76847f; text-align: center; }
.problem-empty { grid-column: 1 / -1; }
.problem-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; padding-top: 24px; }
.problem-pagination__controls, .problem-pagination__jump, .problem-pagination__jump label { display: flex; align-items: center; justify-content: center; gap: 8px; }
.problem-pagination button { min-width: 40px; min-height: 38px; border: 1px solid #d5e1dd; border-radius: 8px; background: #fff; cursor: pointer; }
.problem-pagination button.is-current { border-color: #087853; background: #087853; color: #fff; }
.problem-pagination button:disabled { opacity: .4; cursor: default; }
.problem-pagination__edge, .problem-pagination__step, .problem-pagination__jump-button { padding-inline: 13px; }
.problem-pagination__jump { color: #667085; font-size: 14px; }
.problem-pagination__jump input { width: 68px; min-height: 38px; padding: 0 8px; border: 1px solid #d7dee6; border-radius: 8px; text-align: center; }
.problem-pagination__jump-button { color: #087853; border-color: #b9d8cc !important; background: #f3fbf8 !important; font-weight: 700; }
.programming-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 18px; padding: 28px 20px 38px; color: #7a8782; font-size: 12px; }
.programming-footer a { color: inherit; }
@media (max-width: 900px) {
  .programming-hero { grid-template-columns: 1fr; align-items: flex-start; gap: 24px; }
  .programming-code-search { width: 100%; justify-self: stretch; }
  .programming-workspace { grid-template-columns: 1fr; }
  .knowledge-tree { min-height: 0; max-height: none; border-right: 0; border-bottom: 1px solid #dce6e2; box-shadow: none; }
  .knowledge-tree__body { display: flex; overflow-x: auto; padding: 10px 14px 16px; }
  .knowledge-group { flex: 0 0 min(78vw, 310px); }
  .knowledge-group.is-collapsed .knowledge-group__items { display: grid; }
  .knowledge-group__title::before { display: none; }
}
@media (max-width: 600px) {
  body.programming-page main { width: min(100% - 24px, 1880px); padding-top: 92px; }
  .programming-code-search > div { grid-template-columns: 1fr; }
  .programming-code-search button { width: 100%; }
  .problem-panel { padding: 22px 14px 28px; }
  .problem-panel__header { align-items: flex-start; flex-direction: column; }
  .problem-list { grid-template-columns: 1fr; }
  .problem-list { background: none; }
  .problem-pagination__controls { flex-wrap: wrap; gap: 6px; }
  .problem-pagination__step { display: none; }
  .programming-problem { grid-template-columns: 62px minmax(0, 1fr) auto; padding-inline: 4px; }
}

.problem-list { gap:10px 22px; }
.programming-problem { grid-template-columns:64px minmax(0,1fr) auto 66px 12px; gap:10px; min-height:64px; padding:12px; border:1px solid #dbe5df; border-radius:10px; box-shadow:0 2px 6px rgba(20,50,35,.035); transition:border-color .15s,box-shadow .15s,transform .15s; }
.programming-problem:hover { border-color:#72ae93; box-shadow:0 4px 12px rgba(8,120,83,.12); transform:translateY(-1px); }
.programming-problem:focus-visible { outline:3px solid #75bba0; outline-offset:2px; }
.programming-problem.is-correct { background:#edf8f1; border-color:#b6dcc5; box-shadow:inset 4px 0 #249862; }
.programming-problem.is-wrong { background:#fff7ed; border-color:#ecd1aa; color:#995514; box-shadow:inset 4px 0 #d8973f; }
.programming-problem__status { padding:5px 6px; border-radius:6px; background:#f0f3f5; color:#65727d; font-size:13px; font-weight:700; line-height:1.45; text-align:center; white-space:nowrap; }
.is-correct .programming-problem__status { color:#087853; background:#d7efdf; }
.is-wrong .programming-problem__status { color:#995514; background:#fbe6ca; }
.programming-problem__arrow { color:#7b9587; font-size:24px; }
.programming-problem__stars { font-size:12px; letter-spacing:0; }
@media(max-width:1200px) and (min-width:601px) { .programming-problem { grid-template-columns:58px minmax(0,1fr) 66px 12px; }.programming-problem__stars { grid-row:2; grid-column:2; }.programming-problem__status { grid-column:3; grid-row:1 / span 2; }.programming-problem__arrow { grid-column:4; grid-row:1 / span 2; } }
@media(max-width:600px) { .programming-problem { grid-template-columns:55px minmax(0,1fr) 66px 10px; gap:6px; padding:10px; }.programming-problem__stars { grid-row:2; grid-column:2; }.programming-problem__status { grid-column:3; grid-row:1 / span 2; }.programming-problem__arrow { grid-column:4; grid-row:1 / span 2; } }