/* ============================================
   МастеРЯ — общие стили
   ============================================ */

/* CSS reset: обнуляем браузерные дефолты */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1F2421;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }

/* ============================================
   Цвета и переменные
   ============================================ */
:root {
  /* основная палитра */
  --terracotta:        #CE4512;
  --terracotta-dark:   #A8350A;
  --terracotta-light:  #FBE8E0;
  --terracotta-border: #F0BFA8;

  --sage:        #EDF2E8;
  --sage-dark:   #DCE5D4;
  --sage-deep:   #3D5A3D;
  --sage-medium: #6B8E5A;

  --punct-blue:        #1A5490;
  --punct-blue-light:  #E3EEF7;
  --punct-blue-border: #B3CCE0;

  /* нейтральные */
  --text-primary:   #1F2421;
  --text-secondary: #555E58;
  --text-tertiary:  #8A938D;

  --border-light:   #E8EAE7;
  --border-medium:  #D0D4CF;

  --bg-page:        #FFFFFF;
  --bg-surface:     #FAFBF9;

  /* геометрия */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* контейнер */
  --container-max: 1100px;
}

/* ============================================
   Контейнер
   ============================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================
   Шапка
   ============================================ */
.topbar {
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-page);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-main {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}
.logo-main span { color: var(--terracotta); }
.logo-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.nav-links {
  display: flex;
  gap: 26px;
  align-items: center;
}
.nav-links a {
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a.active { color: var(--terracotta); font-weight: 700; }

.btn-login {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 7px 16px;
  font-size: 14px;
  transition: all 0.15s;
}
.btn-login:hover {
  background: var(--bg-surface);
  border-color: var(--text-tertiary);
}

/* ============================================
   Кнопки
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.15s;
}
.btn-primary {
  background: var(--terracotta);
  color: #fff;
}
.btn-primary:hover { background: var(--terracotta-dark); }

.btn-secondary {
  background: #fff;
  color: var(--text-secondary);
  border: 1px solid var(--border-medium);
}
.btn-secondary:hover { background: var(--sage); }

.btn-dark {
  background: var(--sage-deep);
  color: #fff;
}
.btn-dark:hover { background: #2C4A2C; }

.btn-folder {
  background: var(--terracotta-light);
  color: var(--terracotta);
  border: 1px solid var(--terracotta-border);
}
.btn-folder:hover { background: #F5D7C7; }

.btn-sm {
  padding: 7px 14px;
  font-size: 13px;
}

/* ============================================
   Бейджи и теги
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 14px;
  font-weight: 700;
}
.badge-grade {
  background: var(--terracotta-light);
  color: var(--terracotta-dark);
  border: 1px solid var(--terracotta-border);
}
.badge-fresh {
  background: var(--sage);
  color: var(--sage-deep);
  border: 1px solid var(--sage-dark);
}
.badge-orth {
  background: var(--terracotta-light);
  color: var(--terracotta-dark);
}
.badge-punct {
  background: var(--punct-blue-light);
  color: var(--punct-blue);
}

/* ============================================
   Карточки
   ============================================ */
.card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}

/* ============================================
   Подвал
   ============================================ */
.footer {
  border-top: 1px solid var(--border-light);
  padding: 28px 0 22px;
  background: #fff;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 22px;
}
.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.footer-col a,
.footer-col .footer-item {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 7px;
  line-height: 1.5;
  cursor: pointer;
}
.footer-col a:hover { color: var(--terracotta); }
.footer-col a i { margin-right: 5px; font-size: 13px; }
.footer-about {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.footer-about a {
  display: inline;
  color: var(--terracotta);
}
.footer-about a:hover { text-decoration: underline; }
.footer-bottom {
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
  gap: 10px;
}
.cite-box {
  background: var(--sage);
  border-radius: var(--radius-md);
  padding: 9px 11px;
  font-size: 12px;
  color: var(--sage-deep);
  font-family: 'PT Mono', 'Courier New', monospace;
  line-height: 1.5;
  margin-top: 4px;
}

/* ============================================
   Утилиты
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* мобильная заглушка (готовность под адаптив) */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}