@import url('https://itproger.com/css/main-font.css');
/* Темы и константы */
:root {
  --bg: #2b2b2b;
  --bg-alt: #212121;
  --fg: #e0e0e0;
  --accent: #80cbc4;
  --accent-hover: #4f9e96;
  --code-bg: #1e1e1e;
  --border: #444;
  --shadow: rgba(0, 0, 0, 0.5);
}

/* Сброс и общий стиль */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  display: flex;
  height: 100vh;
  font-family:Montserrat,sans-serif;
  background: var(--bg);
  color: var(--fg);
}

/* Сайдбар */
#sidebar {
  width: 240px;
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
#backLink {
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
}
#backLink:hover {color: #4f9e96}
#langSelect {
  margin: 12px 16px;
  padding: 6px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;
}
#sidebar ul { list-style: none; flex: 1; overflow-y: auto; }
#sidebar li {
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}
#sidebar li:hover, #sidebar .active {
  background: var(--border);
}

/* Тонкая и стильная полоса прокрутки для sidebar */
#needSub {
	margin-bottom: 15px;
    border-left: 5px solid #80cbc4;
    padding-left: 5px;
}

#needSub .sub_link {color: #fafafa;}
#needSub .sub_link:hover {text-decoration: none}

#sidebar {
  /* для Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-alt);
}

/* для WebKit-браузеров */
#sidebar::-webkit-scrollbar {
  width: 8px;
}

#sidebar::-webkit-scrollbar-track {
  background: var(--bg-alt);
  border-radius: 4px;
}

#sidebar::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 4px;
  border: 2px solid var(--bg-alt);
}

#sidebar::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-hover);
}

/* Основная область */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}
#taskDescription {
  background: var(--bg-alt);
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 20px;
  line-height: 1.5;
}
#taskTitle {
  font-size: 1.6em;
  margin-bottom: 12px;
}
#infoBar {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 14px;
  font-size: 0.95em;
}
#codeArea {
  flex: 1;
  background: var(--code-bg);
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  resize: vertical;
  min-height: 200px;
  outline: none;
}

#codeArea, #solution {
   font-family:
    ui-monospace,        /* для современных браузеров и macOS */
    SFMono-Regular,      /* macOS */
    Menlo,               /* macOS */
    Monaco,              /* старые версии macOS */
    Consolas,            /* Windows */
    'Liberation Mono',   /* Linux (часто) */
    'Courier New',       /* запасной классический */
    monospace;           /* окончательный fallback */
  font-size: 1.2em;
}

#codeArea::selection, #solution::selection {
  background: #ffcc80; /* светло-оранжевый фон */
  color: #1a1a1a;       /* тёмный текст */
  text-shadow: none;    /* убираем тень, если была */
}

/* Для Firefox — он использует ::-moz-selection */
#codeArea::-moz-selection, #solution::selection {
  background: #ffcc80;
  color: #1a1a1a;
}
#charCount {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
}
#showSolutionBtn {
  margin-top: 16px;
  padding: 10px 16px;
  background: var(--accent);
  color: #212121;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95em;
  box-shadow: 0 2px 4px var(--shadow);
  transition: background 0.2s;
  align-self: start;
}
#showSolutionBtn:hover {
  background: var(--accent-hover);
}
#solution {
  margin-top: 14px;
  background: var(--code-bg);
  padding: 14px;
  border-radius: 6px;
  max-height: 180px;
  overflow-y: auto;
  display: none;
  outline: none;
  color: #fff;
}

@media(max-width: 900px) {
    body {flex-direction: column; height: auto;}
    #sidebar {width: 100%; height: 300px; border-bottom: 5px solid #000}
    
}