/* =========================
   CSS VARIABLES
   ========================= */
:root {
  --color-bg: #0e0e0e;
  --color-bg-secondary: #151515;
  --color-text: #e0e0e0;
  --color-muted: #8a8a8a;
  --color-accent: #22b14c;
  --color-danger: #ff4d4d;

  --font-main: 'Press Start 2P', monospace;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;

  --border-radius: 6px;
  --transition: 0.2s ease;
}

/* =========================
   BASE RESET
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;

  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  opacity: 0.8;
}

/* =========================
   TYPOGRAPHY
   ========================= */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--spacing-md);
  font-weight: 400;
}

h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }

p {
  margin: 0 0 var(--spacing-md);
  color: var(--color-muted);
}

/* Utility */
.accent-color {
  color: var(--color-accent);
}

/* =========================
   LAYOUT
   ========================= */
.container {
  max-width: 1100px;
  padding: 0 var(--spacing-md);
  margin: 0 auto;
}

/* =========================
   HEADER (BEM)
   ========================= */
.header {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid #222;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) 0;
}

.header__logo {
  font-size: 14px;
  color: var(--color-accent);
}

.header__user {
  font-size: 12px;
}

/* =========================
   MAIN (VERTICAL CENTER)
   ========================= */
main.container,
.main {
  flex: 1;
  display: flex;
  align-items: center; /* вертикальное центрирование */
}

/* =========================
   BUTTONS
   ========================= */
.btn {
  display: inline-block;
  padding: 10px 14px;
  font-family: var(--font-main);
  font-size: 10px;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}

.btn--primary {
  background: var(--color-accent);
  color: #000;
}

.btn--primary:hover {
  background: #1c9a42;
}

.btn--secondary {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--secondary:hover {
  background: rgba(34, 177, 76, 0.1);
}

.btn:active {
  transform: scale(0.97);
}

/* =========================
   FORMS
   ========================= */
.form {
  max-width: 400px;
}

.form__group {
  margin-bottom: var(--spacing-md);
}

.form__label {
  display: block;
  font-size: 10px;
  margin-bottom: var(--spacing-xs);
}

.input,
.textarea {
  width: 100%;
  padding: 10px;
  font-family: var(--font-main);
  font-size: 10px;
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border: 1px solid #333;
  border-radius: var(--border-radius);
}

.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form__message {
  font-size: 9px;
}

.form__message--error {
  color: var(--color-danger);
}

.form__message--success {
  color: var(--color-accent);
}

/* =========================
   MAIN PAGE
   ========================= */
.hero {
  width: 100%;
  padding: var(--spacing-lg) 0;
  text-align: center;
}

.hero__title {
  font-size: 32px;
  margin-bottom: var(--spacing-md);
}

.hero__subtitle {
  font-size: 12px;
}

/* =========================
   ACTIONS
   ========================= */
.actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);

  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.actions__item {
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border: 1px solid #222;
  border-radius: var(--border-radius);

  display: flex;
  justify-content: center;
}

/* Центрирование одиночного элемента под GitHub */
@media (min-width: 769px) {
  .actions__item--center {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 300px;
    width: 100%;
  }
}


/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px) {
  h1 { font-size: 22px; }

  .header__inner {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

/* =========================
   TABLES
   ========================= */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: var(--spacing-lg) auto;
  max-width: 900px;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-main);
  font-size: 10px;
  background: var(--color-bg-secondary);
  border: 1px solid #222;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.table thead {
  background: #101010;
}

.table th,
.table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #222;
}

.table th {
  color: var(--color-accent);
  font-weight: 400;
  font-size: 9px;
}

.table td {
  color: var(--color-muted);
}

.table tr:last-child td {
  border-bottom: none;
}


.table thead tr th:first-child { border-top-left-radius: var(--border-radius); }
.table thead tr th:last-child  { border-top-right-radius: var(--border-radius); }
.table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--border-radius); }
.table tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--border-radius); }


.table--compact th,
.table--compact td {
  padding: 6px 8px;
  font-size: 9px;
}

.table--center td,
.table--center th {
  text-align: center;
}

.row-link {
  display: block;
  text-decoration: none;
  color: inherit;  /* Matches table text color */
  padding: 12px;   /* Matches typical td padding */
}
html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

html::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

.hero .form {
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   MARKDOWN / TASK CONTENT
   ========================= */
.task-content {
  max-width: 800px;
  width: 100%;
  margin: var(--spacing-lg) auto;
  padding: var(--spacing-lg);

  background: var(--color-bg-secondary);
  border: 1px solid #222;
  border-radius: 20px; /* полукруглый прямоугольник */

  font-size: 11px;
  line-height: 1.8;
  color: var(--color-text);

  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
}

/* =========================
   HEADINGS
   ========================= */
.task-content h1,
.task-content h2,
.task-content h3,
.task-content h4 {
  color: #ffffff; /* убрали зелёный */
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  font-weight: 400;
}

.task-content h1 { font-size: 20px; }
.task-content h2 { font-size: 16px; }
.task-content h3 { font-size: 13px; }

/* =========================
   TEXT
   ========================= */
.task-content p {
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.task-content strong {
  color: #ffffff;
}

.task-content em {
  color: #cccccc; /* мягкое выделение без акцента */
}

/* =========================
   LISTS
   ========================= */
.task-content ul,
.task-content ol {
  margin: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg);
  color: var(--color-text);
}

.task-content li {
  margin-bottom: 6px;
}

/* =========================
   BLOCKQUOTE
   ========================= */
.task-content blockquote {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border-left: 3px solid #444; /* нейтральный */
  background: #101010;
  color: var(--color-muted);
  border-radius: 10px;
}

/* =========================
   INLINE CODE
   ========================= */
.task-content code {
  background: #101010;
  padding: 2px 6px;
  border-radius: 6px;
  color: #e6e6e6; /* больше не зелёный */
  font-size: 10px;
  border: 1px solid #222;
}

/* =========================
   CODE BLOCKS
   ========================= */
.task-content pre {
  background: #0c0c0c;
  padding: var(--spacing-md);
  border-radius: 12px;
  overflow-x: auto;
  border: 1px solid #222;
  margin-bottom: var(--spacing-md);
}

.task-content pre code {
  padding: 0;
  background: none;
  border: none;
  color: #dcdcdc;
  font-size: 10px;
  line-height: 1.6;
}

/* =========================
   TABLES
   ========================= */
.task-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-md) 0;
  font-size: 10px;
  background: #101010;
  border-radius: 12px;
  overflow: hidden;
}

.task-content th,
.task-content td {
  border: 1px solid #222;
  padding: 8px;
}

.task-content th {
  color: #ffffff;
  background: #0f0f0f;
  font-weight: 400;
}

.task-content td {
  color: var(--color-muted);
}

/* =========================
   LINKS INSIDE MARKDOWN
   ========================= */
:root{
  --text:#eaf1fb;
  --muted:#a9b8d6;
  --accent:#7c5cff;
  --accent2:#5da9ff;
  --accent3:#ffb454;
}

.markdown-content{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--text);
  line-height:1.7;
  max-width:720px;
  margin:18px auto;
  padding:18px 20px 14px;
  hyphens:auto;
}

/* Remove extra space after last element */
.markdown-content > *:last-child{margin-bottom:0}

/* HEADERS — centered only */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6{
  text-align:center;
  margin:26px 0 12px;
  font-weight:700;
  line-height:1.2;
}
.markdown-content h1{font-size:2em;color:var(--accent);border-bottom:3px solid rgba(124,92,255,.15);padding-bottom:8px}
.markdown-content h2{font-size:1.6em;color:var(--accent2)}
.markdown-content h3{font-size:1.3em;color:var(--accent3)}

/* BODY TEXT — book style justification */
.markdown-content p,
.markdown-content li,
.markdown-content blockquote,
.markdown-content dd,
.markdown-content td{
  text-align:justify;
  text-justify:inter-word;
  color:var(--muted);
}
.markdown-content p{margin:12px 0;color:var(--text)}

/* LISTS */
.markdown-content ul,
.markdown-content ol{
  margin:14px 0 14px 1.4em;
  padding:0;
}

/* Bullet list */
.markdown-content ul{list-style:disc}

/* Numbered list — FIXED number/text spacing */
.markdown-content ol{
  list-style:decimal outside;
}
.markdown-content ol li{
  padding-left:.4em; /* small breathing room after number */
  margin:6px 0;
}

/* BLOCKQUOTE — compact, no trailing gap */
.markdown-content blockquote{
  border-left:4px solid var(--accent2);
  background:linear-gradient(90deg, rgba(93,169,255,.06), transparent);
  padding:8px 14px;
  margin:14px 0;
  color:var(--text);
}
.markdown-content blockquote p{margin:0}

/* HORIZONTAL RULE */
.markdown-content hr{
  border:none;
  height:3px;
  margin:28px 0;
  background:linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
}

/* TABLES */
.markdown-content table{width:100%;border-collapse:collapse;margin:16px 0}
.markdown-content th,
.markdown-content td{padding:10px;text-align:justify}
.markdown-content th{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.markdown-content tr:nth-child(even){background:rgba(124,92,255,.04)}

/* DEFINITION LIST */
.markdown-content dt{font-weight:700;color:var(--text);margin-top:10px}
.markdown-content dd{margin:4px 0 10px 1em}

/* LINKS */
.markdown-content a{color:var(--accent2);text-decoration:underline}
.markdown-content a:hover{opacity:.85}

/* Removed: code blocks & images intentionally */