:root{
  --bg:#fbf6ea; --ink:#193a3f; --muted:#587f86;
  --card1:#D5EDE0; --card2:#D6EDD5; --card3:#D5EDEC; --card4:#EDEBD5;
  --btn:#e8f0ee; --btn-ink:#1e4b51;
  --bar:#9cc7c2; --bar-ink:#12373b;
  --bar-bottom:#1c5b61; --bar-bottom-ink:#e9f3f1;
  --radius:14px; --shadow:0 8px 20px rgba(0,0,0,.06);
}


:root{
  --bg:#fbf6ea; --ink:#193a3f; --muted:#587f86;

  /* Pastel cards — можно заменить на твои */
  --card1:#D5EDE0; /* Analyze */
  --card2:#D6EDD5; /* Literature */
  --card3:#D5EDEC; /* Chemical (вместо розового) */
  --card4:#EDEBD5; /* Resources */

  /* Buttons */
  --btn:#e8f0ee;            /* светлая кнопка внутри карточек */
  --btn-ink:#1e4b51;
  --btn-primary:#3f7f86;    /* насыщенная зелёно-синяя для primary */
  --btn-primary-ink:#ffffff;
  --btn-secondary:#eaf2f0;  /* softer для secondary */
  --btn-secondary-ink:#1e4b51;

  /* Bars */
  --bar:#9cc7c2; --bar-ink:#12373b;
  --bar-bottom:#1c5b61; --bar-bottom-ink:#e9f3f1;

  --radius:14px; --shadow:0 8px 20px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.container{max-width:1160px;margin:0 auto;padding:0 20px}

/* ─────────────── Top bar ─────────────── */
.topbar{background:var(--bar);color:var(--bar-ink);box-shadow:var(--shadow)}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px; padding:10px 20px;
}
.brand{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none}
.logo{width:36px;height:36px}
.brand__name{font-size:28px;font-weight:700;letter-spacing:.3px}

/* Правка: ровное выравнивание "Hi, …" и иконки */
.authnav{
  display:flex; align-items:center; gap:10px;
}
.hello{
  display:flex; align-items:center; /* центрирование по высоте */
  line-height:1;                    /* убираем лишние асцендеры/десцендеры */
  margin-right:6px;
}

/* кнопки "Sign in / Sign up" */
.btn{
  appearance:none; border:0; cursor:pointer; font-weight:700;
  border-radius:12px; padding:12px 20px;
  transition:transform .06s,box-shadow .2s,background .2s,color .2s;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:rgba(255,255,255,.28);color:var(--bar-ink);padding:10px 16px}
.btn--ghost:hover{background:rgba(255,255,255,.38)}
.btn--open{background:var(--btn);color:var(--btn-ink);box-shadow:0 2px 0 rgba(0,0,0,.08) inset;min-width:104px;font-size:18px}
.btn--open[disabled]{opacity:.6;cursor:not-allowed}

/* profile icon button */
.avatar-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px;
  background:rgba(255,255,255,.28);
  transition:background .2s ease, transform .06s ease;
}
.avatar-btn:hover{ background: rgba(255,255,255,.38); }
.avatar-btn:active{ transform: translateY(1px); }

/* ─────────────── Main content ─────────────── */
.main{padding:28px 0 80px}
.stack{display:flex;flex-direction:column;gap:18px}
.card{position:relative;border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow)}
.card h2{margin:0 0 8px;font-size:clamp(22px,2.6vw,30px)}
.card p{margin:0;color:var(--muted);font-size:clamp(15px,1.6vw,18px);max-width:60ch}
.card .cta{position:absolute;right:18px;top:50%;transform:translateY(-50%)}
.card--1{background:var(--card1)} .card--2{background:var(--card2)}
.card--3{background:var(--card3)} .card--4{background:var(--card4)}

/* Index: шире блоки и масштабирование под экран */
.page-index{max-width:min(1360px,94vw);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.page-index .card p{max-width:72ch}

.badge{display:inline-block;background:rgba(0,0,0,.18);color:#fff;border-radius:999px;padding:6px 10px;font-size:13px;margin-left:10px}

/* ─────────────── Bottom bar ─────────────── */
.bottombar{position:sticky;top:100%;background:var(--bar-bottom);color:var(--bar-bottom-ink)}
.footnav{display:flex;gap:36px;justify-content:center;align-items:center;padding:18px 12px}
.footnav a{color:var(--bar-bottom-ink);text-decoration:none;font-weight:600}
.footnav a:hover{text-decoration:underline}

/* ─────────────── Dashboard / Profile ─────────────── */
.dash-wrap{max-width:1160px;margin:20px auto 60px;padding:0 20px}
.dash-grid{display:grid;grid-template-columns:1.6fr 0.9fr;gap:24px}
.card.dash{background:rgba(255,255,255,.65)}
.tasks h2{margin:0 0 14px;font-size:28px}
table.tasks{width:100%;border-collapse:collapse;font-size:16px}
table.tasks th, table.tasks td{ text-align:left; padding:12px 10px; border-bottom:1px solid #e6ecef }
table.tasks th{ color: var(--muted); font-weight:600 }
.status-badge{ display:inline-block; padding:6px 10px; border-radius:10px; font-weight:600; font-size:14px; background:#e8f0ee; color:#1e4b51 }
.status-pending{ background:#fff4da; color:#8a6700 }
.status-processing{ background:#e6e9ef; color:#3e4654 }
.status-done{ background:#dcf2e6; color:#1b4c3d }
.status-error{ background:#ffe3e6; color:#7b1e26 }
.muted{ color: var(--muted) }
.empty{ background:rgba(255,255,255,.65); border:1px dashed #c9d6d8; padding:18px; border-radius:12px; text-align:center; color: var(--muted) }

/* правая колонка (Account) липкая */
.account{ position:sticky; top:88px; align-self:start }
.account h3{ margin:0 0 10px; font-size:24px }
.row{ display:grid; grid-template-columns:140px 1fr; gap:10px; padding:6px 0; border-bottom:1px solid #e6ecef }
.row .label{ color:var(--muted); font-weight:600 }

/* большие кнопки во всю ширину (Edit Profile / Log Out) */
.btn--block{ width:100%; display:flex; justify-content:center }
.btn--primary{
  background:var(--btn-primary); color:var(--btn-primary-ink);
}
.btn--primary:hover{ filter: brightness(1.05); }
.btn--secondary{
  background:var(--btn-secondary); color:var(--btn-secondary-ink);
}
.btn--secondary:hover{ filter: brightness(1.04); }


/* mobile */
@media (max-width:900px){
  .dash-grid{ grid-template-columns:1fr }
  .account{ position:static }
}
@media (max-width:720px){
  .card{padding:20px 18px 70px}
  .card .cta{right:16px;top:auto;bottom:16px;transform:none}
}

/* ════════════════════════════════════════════════
   Единая сетка для блоков чекбоксов
   ════════════════════════════════════════════════ */
.checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px 20px;
  margin-top: 6px;
}

.checkgrid label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.25;
  font-size: 15px;
  color: var(--ink, #1f2328);
}

.checkgrid input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  transform: scale(1.05);
  accent-color: var(--accent, #007bff);
}

.checkgrid .hint {
  white-space: normal;
  font-size: 13px;
  color: #666;
}

/* ════════════════════════════════════════════════
   Сетка для блока ассоциаций (фикс одинаковых размеров)
   ════════════════════════════════════════════════ */
#assoc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px 20px;
  align-items: start;
}

#assoc-grid label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* ════════════════════════════════════════════════
   Rule-/ML-based extraction — вложенный подраздел (фиксированно)
   ════════════════════════════════════════════════ */
div#assoc-grid .assoc-row {
  grid-column: 1 / -1 !important;
  display: flex !important;
  gap: 22px !important;
  justify-content: flex-start !important;
  align-items: center !important;

  margin-top: 18px !important;
  padding: 10px 14px !important;

  background: #fffdf3 !important;               /* мягкий кремовый фон */
  border: 1px solid #f4e6b2 !important;         /* тонкая рамка */
  border-radius: 8px !important;
  box-shadow: inset 0 0 3px rgba(255, 228, 120, 0.25) !important;
}

div#assoc-grid .assoc-row:hover {
  background: #fffbe8 !important;
  box-shadow: 0 0 3px rgba(255, 232, 140, 0.35) !important;
}

div#assoc-grid .assoc-row label {
  flex: 0 1 auto !important;
  font-weight: 600 !important;
  color: #4c3f00 !important;
  font-size: 15px !important;
}

div#assoc-grid .assoc-row input[type="checkbox"] {
  transform: scale(1.1) !important;
  accent-color: #b28b00 !important;
}


/* ════════════════════════════════════════════════
   Общая стилистика fieldset
   ════════════════════════════════════════════════ */
fieldset {
  border-radius: 10px;
  border: 1px solid #dfe4e2;
  padding: 12px 18px 16px;
  margin-bottom: 20px;
  background-color: #fefefe;
}

fieldset legend {
  font-weight: 600;
  color: #233;
  font-size: 16px;
}