/* ============================================================
   PaperMind — Scientific Intelligence Platform
   Design tokens -> primitives -> layout -> components
   ============================================================ */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg:         #09090B;
  --surface:    #111113;
  --surface-2:  #151518;
  --surface-3:  #1a1a20;
  --border:     #27272A;
  --border-2:   #35353c;

  /* text */
  --text:       #FAFAFA;
  --text-2:     #A1A1AA;
  /* #71717A idi — HƏR səthdə 4.5:1 kontrastdan aşağı düşürdü (ən pis hal
     --surface-3 üzərində 3.58). Kiçik, böyük hərfli etiketlər məhz bu rənglə
     yazılır, yəni ən çox oxunması çətin olanlar ən zəif kontrasta sahib idi.
     #85858F ən pis halda 4.74 verir və --text-2-dən hələ də açıq-aydın
     sakitdir, ona görə üç səviyyəli iyerarxiya pozulmur. */
  --text-3:     #85858F;

  /* accents */
  /* #6366F1 idi: ağ mətnlə kontrastı 4.47 verirdi — 4.5 həddindən aşağı.
     Bu rəng əsas «Axtar» düyməsinin, aktiv dil düyməsinin və keçid linkinin
     fonudur, yəni ən çox basılan yerlər ən zəif oxunan yerlər idi.
     #5457E8 eyni indiqodur, 5.38 verir. */
  --accent:      #5457E8;
  --accent-2:    #818CF8;
  --accent-soft: rgba(84, 87, 232, .15);
  --ai:          #A855F7;
  --ai-soft:     rgba(168, 85, 247, .13);
  --ok:          #22C55E;
  --ok-soft:     rgba(34, 197, 94, .12);
  --cyan:        #22D3EE;
  --warn:        #F59E0B;
  --err:         #F87171;
  --err-soft:    rgba(248, 113, 113, .12);

  /* chart series — validated for CVD on this surface */
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181;

  /* spacing — kiçik pillələr komponent daxilində, böyüklər bölmələr arasında */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 44px; --sp-12: 64px;
  --sp-14: 80px; --sp-16: 96px;

  /* Bölmə ritmi. clamp() ona görədir ki, EYNİ qayda telefonda sıxılsın,
     geniş ekranda açılsın — hər ölçü üçün ayrıca media sorğusu saxlamaq
     lazım gəlmir və iki yerdə dəyişdirmək unudulmur. */
  --gap-section: clamp(40px, 5vw, 72px);
  --pad-panel:   clamp(20px, 3.4vw, 40px);
  --pad-shell:   clamp(16px, 4vw, 40px);

  /* Oxu ölçüsü: sətirdə ~68 hərf. Bunsuz mətn ekranın bütün eninə yayılır,
     göz sətir sonundan növbətinin başına qayıda bilmir və uzun cavab
     oxunmaz olur. Ən çox AI cavabına aiddir — saytın əsas mətni odur. */
  --measure: 68ch;

  /* radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  /* motion */
  --t: 180ms cubic-bezier(.4, 0, .2, 1);

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  /* Başlıqlar üçün serif: akademik ton verir və HEÇ BİR şəbəkə sorğusu
     tələb etmir — hamısı sistemdə var. Google Fonts əlavə etsək, birinci
     boya xarici serverə bağlı olardı. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
  --header-h: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--text); margin: 0; line-height: 1.25; font-weight: 600; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }

.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;
}
.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 60;
  background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--r-md);
  text-decoration: none;
}
.skip-link:focus { left: 12px; }

/* ============================= header ============================= */

.hdr {
  position: sticky; top: 0; z-index: 40;
  background: rgba(9, 9, 11, .86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.hdr-inner {
  max-width: 1320px; margin: 0 auto; height: var(--header-h);
  padding: 0 var(--pad-shell);
  display: flex; align-items: center; gap: var(--sp-6);
}

.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  min-width: 0;                      /* flex uşağının kiçilməsinə icazə */
}
.brand-mark { width: 30px; height: 30px; color: var(--accent-2); flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text b {
  color: var(--text); font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand-text i {
  font-style: normal; font-size: 10.5px; color: var(--text-3);
  letter-spacing: .07em; text-transform: uppercase;
}

.nav { display: flex; gap: 2px; margin-left: var(--sp-2); }
.nav a {
  padding: 7px 13px; border-radius: var(--r-md); font-size: 13.5px;
  color: var(--text-3); text-decoration: none; transition: color var(--t), background var(--t);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a.on { color: var(--text); background: var(--surface-2); }

.hdr-right {
  margin-left: auto; display: flex; align-items: center; gap: var(--sp-5);
  flex-shrink: 0;                    /* idarəedicilər kəsilməməlidir */
}

.metrics { display: flex; gap: var(--sp-5); margin: 0; }
.metrics > div { display: flex; flex-direction: column; align-items: flex-end; }
.metrics dt {
  order: 2; font-size: 9.5px; color: var(--text-3);
  letter-spacing: .09em; text-transform: uppercase;
}
.metrics dd {
  order: 1; margin: 0; color: var(--text); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lang { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; }
.lang button {
  background: none; border: 0; color: var(--text-3);
  padding: 4px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; transition: color var(--t), background var(--t);
}
.lang button:hover { color: var(--text-2); }
.lang button.on { background: var(--accent); color: #fff; }

.icon-btn {
  display: grid; place-items: center; width: 32px; height: 32px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text-2);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.icon-btn:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-3); }
.icon-btn svg { width: 16px; height: 16px; }
.drawer-toggle { display: none; }

/* ============================= layout ============================= */

.shell {
  max-width: 1320px; margin: 0 auto;
  padding: var(--sp-12) var(--pad-shell) var(--sp-16);
  display: block;
}
main { display: flex; flex-direction: column; gap: var(--gap-section); min-width: 0; }
/* Kartlar əsas sahəyə köçdü (bax `.explore`). `.side` yalnız mobil sürüşən
   panelin qabığı kimi qaldı — orada naviqasiya güzgüsü var, başqa heç nə. */
.side { display: none; }
.side-head { display: none; }
.side-nav { display: none; }
.scrim, .scrim[hidden] { display: none; }

/* ============================= kəşf şəbəkəsi =============================

   Sahələr, seçilmiş məqalə, mənbələr və müəlliflər. Əvvəl 300px-lik yan
   sütunda üst-üstə yığılırdı: əsas sütun 453px, panel 1936px idi.
   İndi yerin ENİ ilə paylanır — auto-fit sayəsində geniş ekranda üç sütun,
   telefonda bir sütun olur, ayrıca media sorğusu lazım gəlmir. */

.explore {
  display: grid; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: var(--sp-5);
  margin-top: var(--gap-section);
}
/* Sahə seçimi süzgəcdir — bütün eni tutur ki, qruplar yan-yana düzülsün. */
.explore > .areas-card { grid-column: 1 / -1; }

.areas {
  display: grid; gap: var(--sp-4) var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-top: var(--sp-4);
}
.area-all { grid-column: 1 / -1; }
.area-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

/* Qrup başlığı öz sütununun içindədir, ona görə üst xətt hər sütuna düşür. */
.area-group {
  padding: 0 0 6px 11px; border-top: 0; margin: 0 0 4px;
  border-bottom: 1px solid var(--border);
}

/* ============================= hero ============================= */

.hero { padding: var(--sp-6) 0 var(--sp-2); }
.eyebrow {
  margin: 0 0 var(--sp-3); font-size: 11.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent-2);
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.2vw, 4rem);
  /* Serifdə mənfi tracking hərfləri bir-birinə yapışdırır — sans üçün
     düzgün olan -.028em burada səhvdir. */
  letter-spacing: -.012em; font-weight: 500; line-height: 1.1;
  margin-bottom: var(--sp-5);
}
.hero-sub {
  margin: 0 0 var(--sp-8); max-width: 52ch;
  font-size: 17.5px; color: var(--text-2); line-height: 1.6;
}

/* unified research console */
.console {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--sp-5);
  transition: border-color var(--t);
}
.console:focus-within { border-color: var(--border-2); }

.console-modes { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.mode {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid transparent; color: var(--text-3);
  padding: 6px 12px; border-radius: var(--r-md); font-size: 13px; font-weight: 500;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.mode svg { width: 14px; height: 14px; }
.mode:hover { color: var(--text-2); background: var(--surface-2); }
.mode.on { color: var(--text); background: var(--surface-3); border-color: var(--border); }
.mode[data-mode="ask"].on { color: #e9d5ff; background: var(--ai-soft); border-color: rgba(168,85,247,.3); }
.mode-hint { font-size: 12px; color: var(--text-3); margin-left: auto; }

.console-row { display: flex; align-items: center; gap: var(--sp-3); position: relative; }
.console-icon {
  position: absolute; left: 14px; width: 16px; height: 16px;
  color: var(--text-3); pointer-events: none;
}
.console-row input {
  flex: 1; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); color: var(--text);
  padding: 14px 16px 14px 40px; font-size: 15.5px;
  transition: border-color var(--t), background var(--t);
}
.console-row input::placeholder { color: var(--text-3); }
.console-row input:focus { outline: none; border-color: var(--accent); background: var(--surface-3); }

.submit {
  background: var(--accent); color: #fff; border: 0;
  padding: 14px 26px; border-radius: var(--r-lg);
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  transition: background var(--t), transform var(--t), opacity var(--t);
}
.submit:hover { background: var(--accent-2); }
.submit:active { transform: translateY(1px); }
.submit:disabled { opacity: .55; cursor: progress; }
.console.ask .submit { background: var(--ai); }
.console.ask .submit:hover { background: #b975f5; }
.console.ask .console-row input:focus { border-color: var(--ai); }

.console-foot {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-3); flex-wrap: wrap; min-height: 22px;
}
.scope {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft); color: var(--accent-2);
  border-radius: var(--r-pill); padding: 3px 11px; font-size: 12px; font-weight: 500;
}
.examples { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.example {
  background: transparent; border: 1px solid var(--border); color: var(--text-3);
  border-radius: var(--r-pill); padding: 4px 12px; font-size: 12px;
  transition: color var(--t), border-color var(--t);
}
.example:hover { color: var(--text-2); border-color: var(--border-2); }

/* ============================= results ============================= */

.results { display: flex; flex-direction: column; gap: var(--sp-5);
  scroll-margin-top: calc(var(--header-h) + var(--sp-6)); }
.results:empty { display: none; }

.res-head {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; padding-bottom: var(--sp-1);
}
.res-head h2 { font-size: 13px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.res-meta { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 3px 11px; font-size: 11.5px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.badge.ai { border-color: rgba(168,85,247,.3); background: var(--ai-soft); color: #e9d5ff; }
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.translated {
  font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 7px;
}
.translated code { font-family: var(--mono); font-size: 12px; color: var(--text-2); }

/* --- search result card --- */
.paper {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
  transition: border-color var(--t), background var(--t);
}
.paper:hover { border-color: var(--border-2); background: var(--surface-2); }

.ring { position: relative; width: 52px; height: 52px; }
.ring svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.5; }
.ring .track { stroke: var(--surface-3); }
.ring .arc { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray 400ms var(--t); }
.ring b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ring-label {
  display: block; text-align: center; font-size: 9px; color: var(--text-3);
  letter-spacing: .06em; text-transform: uppercase; margin-top: 5px;
}

.paper-title {
  font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none;
  display: block; margin-bottom: 7px; line-height: 1.4;
}
.paper-title:hover { color: var(--accent-2); }
.paper-meta {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); margin-bottom: var(--sp-3);
}
.paper-meta .field { color: var(--accent-2); font-weight: 500; }
.paper-meta .sep { color: var(--border-2); }
.paper-meta .aid { font-family: var(--mono); font-size: 12px; }
.paper-abs {
  margin: 0 0 var(--sp-4); font-size: 14px; color: var(--text-2); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.paper-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.act {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  border-radius: var(--r-md); padding: 6px 13px; font-size: 12.5px; text-decoration: none;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.act:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-3); }
.act svg { width: 13px; height: 13px; }
.act.ai:hover { color: #e9d5ff; border-color: rgba(168,85,247,.35); background: var(--ai-soft); }

/* --- AI answer panel --- */
.answer-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 2px solid var(--ai); border-radius: var(--r-xl);
  padding: var(--pad-panel); animation: rise 220ms var(--t);
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.answer-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.answer-head h2 {
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ai); font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.answer-head h2 svg { width: 14px; height: 14px; }
.answer-body {
  font-size: 17px; line-height: 1.8; color: var(--text); max-width: var(--measure);
  white-space: pre-wrap; margin-bottom: var(--sp-6);
}
.answer-body .cite {
  font-family: var(--mono); font-size: 12.5px; color: var(--accent-2);
  background: var(--accent-soft); border-radius: var(--r-sm); padding: 1px 5px;
}

.sources-head {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
  padding-top: var(--sp-4); border-top: 1px solid var(--border); margin-bottom: var(--sp-3);
}
.sources { display: flex; flex-direction: column; gap: var(--sp-2); }
.source {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: var(--sp-3);
  align-items: center; padding: 11px 13px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); text-decoration: none;
  transition: border-color var(--t), background var(--t);
}
.source:hover { border-color: var(--border-2); background: var(--surface-3); }
.source .idx {
  display: grid; place-items: center; width: 24px; height: 24px;
  background: var(--ai-soft); color: #e9d5ff; border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 600;
}
.source .st { min-width: 0; }
.source .st b { display: block; color: var(--text); font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source .st span { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.source .sc { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================= panels ============================= */

/* Bölmə QUTU deyil.
   Əvvəl hər bölmə çərçivəli səth idi, içindəki məqalə kartları da çərçivəli —
   qutu içində qutu. «Sıxılmış, limitli» hissi məhz oradan gəlirdi.
   İndi bölmələri BOŞLUQ ayırır (--gap-section), xətt yox; çərçivə yalnız
   ayrıca VAHİD olan elementlərdə qalır: məqalə kartı, AI cavabı, konsol,
   yan panel kartları. Fon-fiqur münasibəti düzəlir: qab görünmür, məzmun görünür.

   Doldurma sıfırdır ki, bölmə başlığı hero və konsolla EYNİ şaquli xətdən
   başlasın. Doldurma qalsaydı, hər bölmə bir neçə piksel sağa sürüşərdi və
   səhifənin sol kənarı pilləkənə dönərdi. */
.panel {
  background: none; border: 0; padding: 0;
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}
.panel-head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.panel-head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(21px, 2.3vw, 27px); letter-spacing: -.008em;
}
.panel-sub { margin: var(--sp-2) 0 0; font-size: 15px; color: var(--text-2); max-width: 56ch; }
.panel-tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

.chart-wrap { position: relative; height: 280px; }

/* ---------- vərəqlənən məqalə dəsti ---------- */

.deck {
  position: relative; min-height: 210px;
  border-radius: var(--r-lg); outline-offset: 4px;
  touch-action: pan-y;                    /* üfüqi sürüşdürmə bizə qalır */
}
.deck-card { animation: deckIn 220ms var(--t); }
@keyframes deckIn { from { opacity: 0; transform: translateX(var(--from, 10px)); } to { opacity: 1; transform: none; } }

.deck-meta {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); margin-bottom: 10px;
}
.deck-field {
  color: var(--accent-2); background: var(--accent-soft);
  border-radius: var(--r-pill); padding: 2px 11px; font-weight: 500;
}
.deck-title {
  display: block; color: var(--ink, var(--text)); font-size: 19px; font-weight: 600;
  line-height: 1.35; letter-spacing: -.01em; text-decoration: none; margin-bottom: 10px;
}
.deck-title:hover { color: var(--accent-2); }
.deck-abs {
  margin: 0 0 var(--sp-4); font-size: 15px; color: var(--text-2); line-height: 1.7;
  max-width: var(--measure);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.deck-count { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.deck-dots { display: flex; gap: 5px; margin-top: var(--sp-4); flex-wrap: wrap; }
.deck-dots i {
  width: 18px; height: 3px; border-radius: 2px; background: var(--border-2);
  transition: background var(--t);
}
.deck-dots i.on { background: var(--accent); }

@media (max-width: 720px) {
  .deck { min-height: 260px; }
  .deck-title { font-size: 17px; }
}

.deltas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-2); margin-top: var(--sp-5);
}
.delta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 10px 13px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.delta .dn { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); min-width: 0; }
.delta .dn i { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.delta .dn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delta .dv { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta .dv.up { color: #86efac; }
.delta .dv.down { color: var(--err); }

.foot-note { margin: var(--sp-4) 0 0; font-size: 12px; color: var(--text-3); }
.pill {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 4px 12px; font-size: 12px; color: var(--text-2);
}
.digest-text {
  font-size: 16.5px; line-height: 1.8; color: var(--text);
  max-width: var(--measure); white-space: pre-wrap;
}

/* ============================= aside cards ============================= */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
}
.card-head { display: flex; align-items: center; gap: var(--sp-3); }
.card-title {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.card-sub { margin: 3px 0 var(--sp-4); font-size: 13px; color: var(--text-2); }

.area-group {
  font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
  padding: 12px 0 5px 11px; border-top: 1px solid var(--border); margin-top: 6px;
}
.area {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; border-left: 2px solid transparent;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 8px 11px; text-align: left; color: var(--text-2); font-size: 13.5px;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.area:hover { background: var(--surface-2); color: var(--text); }
.area.on { background: var(--accent-soft); border-left-color: var(--accent); color: var(--text); font-weight: 500; }
.area .glyph { width: 15px; text-align: center; color: var(--text-3); font-size: 12px; flex-shrink: 0; }
.area.on .glyph { color: var(--accent-2); }
.area .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area .ct { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.area.on .ct { color: var(--accent-2); }

.spot-timer { width: 18px; height: 18px; margin-left: auto; transform: rotate(-90deg); }
.spot-timer circle { fill: none; stroke-width: 2; }
.spot-track { stroke: var(--surface-3); }
.spot-arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 50.3; }
.spot-item { animation: fade 400ms var(--t); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.spot-field {
  display: inline-block; font-size: 11px; color: var(--accent-2);
  background: var(--accent-soft); border-radius: var(--r-pill); padding: 2px 10px; margin-bottom: 9px;
}
.spot-title {
  display: block; color: var(--text); font-size: 14px; font-weight: 500;
  line-height: 1.45; text-decoration: none; margin-bottom: 7px;
}
.spot-title:hover { color: var(--accent-2); }
.spot-abs {
  margin: 0 0 var(--sp-4); font-size: 12.5px; color: var(--text-3); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.authors { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.authors li { display: flex; flex-direction: column; gap: 4px; }
.authors .row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: 13px; }
.authors .row span:first-child { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authors .row span:last-child { color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.authors .bar { height: 2px; background: var(--accent); border-radius: 1px; opacity: .55; }

.srclist { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.srclist li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); }
.srclist .sdot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.srclist .sn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srclist .sc { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* məqalənin dili; istifadəçinin dili ilə üst-üstə düşəndə vurğulanır */
.lang-chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 1px 8px; font-size: 11px; color: var(--text-3);
}
.lang-chip.match {
  border-color: rgba(168, 85, 247, .4); background: var(--ai-soft); color: #e9d5ff;
}

/* mənbə nişanları — nəticə kartlarında */
.src {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 1px 8px; font-size: 11px; color: var(--text-3);
}
.src i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.src.merged { border-color: rgba(34,197,94,.35); background: var(--ok-soft); color: #86efac; }


/* ============================= states ============================= */

.skel { display: flex; flex-direction: column; gap: var(--sp-4); }
.skel-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: grid; grid-template-columns: 58px minmax(0,1fr); gap: var(--sp-4);
}
.sk {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--r-sm);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk.circle { width: 52px; height: 52px; border-radius: 50%; }
.sk.line { height: 11px; }
.sk.title { height: 15px; width: 72%; margin-bottom: 11px; }
.sk.short { width: 45%; }

.loading-note {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--text-2); padding: 2px 0;
}
.spinner {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border-2); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
.results.ai .spinner { border-top-color: var(--ai); }
@keyframes spin { to { transform: rotate(360deg); } }

.state {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-6); text-align: center;
}
.state.err { border-color: rgba(248,113,113,.28); }
.state h3 { font-size: 16px; margin-bottom: 7px; }
.state p { margin: 0 auto; font-size: 14px; color: var(--text-2); max-width: 46ch; }
.state ul { margin: var(--sp-4) auto 0; padding: 0; list-style: none; display: inline-flex; flex-direction: column; gap: 6px; }
.state li { font-size: 13.5px; color: var(--text-3); }
.state details { margin-top: var(--sp-4); text-align: left; max-width: 60ch; margin-inline: auto; }
.state summary { cursor: pointer; font-size: 12.5px; color: var(--text-3); }
.state pre {
  margin: var(--sp-2) 0 0; padding: 11px 13px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-family: var(--mono); font-size: 11.5px; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
}

.toast {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 60;
  background: var(--surface-2); border: 1px solid rgba(248,113,113,.35);
  border-radius: var(--r-md); padding: 12px 16px; max-width: 380px;
  font-size: 13.5px; color: var(--text); box-shadow: var(--shadow);
  animation: rise 200ms var(--t);
}

/* ============================= footer ============================= */

.ftr {
  max-width: 1320px; margin: 0 auto; padding: var(--sp-8) var(--pad-shell);
  border-top: 1px solid var(--border);
  display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center;
  font-size: 12px; color: var(--text-3);
}
.ftr a { margin-left: auto; color: var(--text-3); text-decoration: none; }
.ftr a:hover { color: var(--text-2); }


/* ---------- hesabın silinməsi (təhlükə zonası) ----------

   Vizual olaraq QƏSDƏN sakitdir. Silmə düyməsi əsas əməliyyatlarla eyni
   çəkidə olsaydı, təsadüfi klik ehtimalı artardı; burada isə səhv klikin
   qiyməti bütün kitabxana və sənədlərdir. Ona görə keçid kimi görünür,
   təsdiq isə ayrıca pəncərədə parol tələb edir. */

.pm-danger-link {
  display: block; width: 100%; margin-top: var(--sp-5);
  background: none; border: 0; padding: var(--sp-2);
  color: var(--text-3); font-size: 13px; text-decoration: underline;
  text-underline-offset: 3px; transition: color var(--t);
}
.pm-danger-link:hover { color: var(--err); }

.pm-danger-text {
  margin: 0 0 var(--sp-5); font-size: 14.5px; line-height: 1.6;
  color: var(--text-2); max-width: 46ch;
}

.pm-danger-btn {
  width: 100%; padding: 12px 18px; border-radius: var(--r-md);
  background: var(--err-soft); color: var(--err);
  border: 1px solid rgba(248, 113, 113, .4);
  font-size: 14.5px; font-weight: 600;
  transition: background var(--t), border-color var(--t);
}
.pm-danger-btn:hover { background: rgba(248, 113, 113, .2); border-color: var(--err); }
.pm-danger-btn:active { transform: scale(.98); }

/* Möhlət zolağı — hesab silinməyə işarələnib, amma hələ oradadır. */
.pm-danger-note {
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: var(--err-soft); border: 1px solid rgba(248, 113, 113, .3);
  border-radius: var(--r-md);
}
.pm-danger-note p { margin: 0 0 var(--sp-3); font-size: 14px; color: var(--text); }

.pm-label {
  display: block; margin-bottom: var(--sp-4);
  font-size: 13px; color: var(--text-2);
}
.pm-label input {
  display: block; width: 100%; margin-top: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 11px 13px;
  color: var(--text); font-size: 15px;
}
.pm-label input:focus { border-color: var(--accent-2); outline: none; }

@media (pointer: coarse) {
  .pm-danger-link, .pm-danger-btn { min-height: 44px; }
}

/* ========================= ayrıca səhifə görünüşü =========================

   Bölmə siyahısı BURADA da yoxdur. Üç qayda seçici gücünə görə sıralanıb:

     1. `main > .page`            səhifələr normal axında görünmür
     2. `body.view-page main > *` səhifə rejimində HƏR ŞEY gizlənir
     3. `... > .page-on`          yalnız aktiv səhifə açılır

   Gücləri (0,1,1) < (0,1,2) < (0,2,2) olduğu üçün `!important` lazım deyil,
   və yeni bölmə əlavə olunanda heç bir siyahı yenilənmir.
*/

main > .page { display: none; }
body.view-page main > * { display: none; }
body.view-page main > .page-on { display: block; }

/* Yan panel araşdırma sahələri üçündür — nə kitabxanada, nə də öz PDF
   sənədlərində süzgəc rolu oynamır, ona görə sütun kimi çıxır.
   ANCAQ yalnız geniş ekranda: ≤960px-də həmin panel sürüşən menyudur və
   naviqasiyanın YEGANƏ yeridir (başlıqdakı nav gizlidir). Onu orada da
   bağlasaq, istifadəçi səhifəyə girib çıxa bilməz. */
/* Ayrıca səhifədə başlıq böyüyür — bura artıq bölmə deyil, səhifədir. */
body.view-page .page-on > .panel-head h2 { font-size: clamp(26px, 3vw, 34px); }

/* «Statistika» səhifəsi iki bloku daşıyır. Aralarındakı məsafə `main`-in
   gap-ından gəlmir (onlar artıq main-in birbaşa övladı deyil), ona görə
   ritmi burada saxlayırıq — eyni --gap-section dəyəri ilə. */
#stats > .panel + .panel { margin-top: var(--gap-section); }

/* ============================= kitabxana (§16) =============================

   Oxu siyahısı, ulduz və oxundu. Üç düymə hər məqalə kartında var, ona görə
   yığcamdır: yalnız ikona + tooltip + aria-label. Mətnli olsaydı, kart
   sətrində beş etiket yan-yana düşərdi və əsas olan («Oxu», «AI-dan soruş»)
   itərdi.
*/

.act-gap { flex: 1 1 auto; }          /* vəziyyət düymələrini sağ kənara itələyir */

.act.lib {
  width: 34px; height: 34px; flex: 0 0 auto;
  padding: 0; justify-content: center;
  color: var(--text-3);
  /* transform ayrıca və qısa: basılma cavabı rəng keçidindən tez olmalıdır,
     yoxsa düymə «gec» hiss olunur. */
  transition: color var(--t), border-color var(--t), background var(--t),
              transform 110ms cubic-bezier(.4, 0, .2, 1);
}
.act.lib svg { width: 15px; height: 15px; }
.act.lib:hover { color: var(--text); }
.act.lib:active { transform: scale(.9); }

/* Aktiv vəziyyət yalnız RƏNGLƏ göstərilmir — dolğunluq da dəyişir.
   Yalnız rəng olsaydı, rəng ayırd etməyən istifadəçi ulduzlu məqaləni
   ulduzsuzdan seçə bilməzdi. */
.act.lib.on { border-color: currentColor; }
.act.lib-saved.on   { color: var(--accent-2); background: var(--accent-soft); }
.act.lib-starred.on { color: var(--warn);     background: rgba(245, 158, 11, .14); }
.act.lib-read.on    { color: var(--ok);       background: var(--ok-soft); }

/* Əlfəcin və ulduz dolur; «oxundu» işarəsi isə cizgidir — onu doldursaq
   tanınmaz ləkəyə çevrilir, ona görə orada yalnız fon dəyişir. */
.act.lib-saved.on svg path, .act.lib-starred.on svg path { fill: currentColor; }

.act.lib.on svg { animation: libPop 280ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes libPop {
  0%   { transform: scale(.55); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Oxunmuş məqalə axtarış nəticəsində də seçilir: «bunu artıq görmüşəm»
   sualına cavab kartın özündə olmalıdır, kitabxanaya keçmədən. */
[data-paper-id].is-read .paper-title,
[data-paper-id].is-read .deck-title { color: var(--text-2); }
[data-paper-id].is-read .paper-abs,
[data-paper-id].is-read .deck-abs { opacity: .72; }

/* ---------- görünüş keçidləri ---------- */

.tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); margin-bottom: var(--sp-6);
}
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px;                /* xətt üstünə oturur */
  color: var(--text-3); padding: 10px 14px; font-size: 14px; font-weight: 500;
  transition: color var(--t), border-color var(--t);
}
.tab:hover { color: var(--text-2); }
.tab.on { color: var(--text); border-bottom-color: var(--accent-2); }

.lib-row { grid-template-columns: minmax(0, 1fr); }   /* uyğunluq halqası yoxdur */
.lib-row + .lib-row { margin-top: var(--sp-4); }

/* İzahlı boşluq: boş qutu «xəta oldu?» sualı doğurur, bir cümlə isə
   nə etmək lazım olduğunu deyir. */
.state-note {
  margin: 0; padding: var(--sp-8) 0;
  color: var(--text-2); font-size: 15px; line-height: 1.65; max-width: 52ch;
}

/* ============================= hərəkət =============================

   Qayda: hərəkət MƏNA daşımalıdır — nəyinsə göründüyünü, dəyişdiyini və ya
   basıldığını bildirməlidir. Bəzək üçün hərəkət yoxdur.
   Bütün bunlar `prefers-reduced-motion` altında sıfırlanır (yuxarıdakı
   qlobal blok) — ona görə burada ayrıca yoxlama təkrarlanmır.
*/

.paper, .act, .tab, .area, .mode {
  will-change: auto;
}

/* Kart üzərinə gələndə bir piksel qalxır. `transform` seçildi, çünki
   `height`/`margin` animasiyası bütün siyahını yenidən düzür (layout thrash);
   transform isə yalnız kompozisiya qatındadır. */
.paper { transition: border-color var(--t), background var(--t), transform 180ms cubic-bezier(.4, 0, .2, 1); }
.paper:hover { transform: translateY(-1px); }

.act:active, .tab:active { transform: scale(.97); }

/* Nəticələr birdən yox, ardıcıl görünür — göz siyahının uzunluğunu tutur.
   Gecikmə 10 karta qədərdir: uzun siyahıda sonuncu kartı yarım saniyə
   gözlətmək «yavaş» hissi verər, oxunma sürətini artırmaz. */
.results > .paper { animation: cardIn 300ms cubic-bezier(.4, 0, .2, 1) backwards; }
.results > .paper:nth-of-type(1) { animation-delay: 0ms; }
.results > .paper:nth-of-type(2) { animation-delay: 35ms; }
.results > .paper:nth-of-type(3) { animation-delay: 70ms; }
.results > .paper:nth-of-type(4) { animation-delay: 105ms; }
.results > .paper:nth-of-type(5) { animation-delay: 140ms; }
.results > .paper:nth-of-type(6) { animation-delay: 175ms; }
.results > .paper:nth-of-type(7) { animation-delay: 210ms; }
.results > .paper:nth-of-type(8) { animation-delay: 245ms; }
.results > .paper:nth-of-type(n+9) { animation-delay: 280ms; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

#library-body .paper { animation: cardIn 260ms cubic-bezier(.4, 0, .2, 1) backwards; }

/* ---------- toxunma cihazları ---------- */

@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  /* Dil düymələri: hündürlük 44-ə qalxır, en 42-də qalır. Üçünü də 44 en
     etsək başlıqda 132px yer tutar və dar ekranda brend adı demək olar ki,
     tamamilə kəsilər — sıra halında qonşu hədəflər üçün hündürlük kifayətdir. */
  .lang button { min-height: 44px; padding-inline: 13px; }
  .acct-btn, .pm-btn, .pm-primary { min-height: 44px; }
  .mode, .example, .area, .nav a, .act { min-height: 44px; }
  .act.lib { width: 44px; height: 44px; }
  .mode, .example { padding-block: 0; display: inline-flex; align-items: center; }
  .area { align-items: center; }
  .deck-dots i { height: 6px; }      /* vərəq nöqtələri barmaqla görünsün */
}

/* ============================= responsive ============================= */

@media (max-width: 1280px) {
  .metrics > div:nth-child(2) { display: none; }
}

@media (max-width: 1080px) {
  .metrics { display: none; }
}

@media (max-width: 960px) {
  .nav { display: none; }
  .drawer-toggle { display: grid; }

  /* Başlıqdakı naviqasiya gizlənir, ona görə sürüşən paneldəki nüsxə açılır.
     Şərt eyni bloklardadır ki, biri dəyişəndə digəri unudulmasın. */
  .side-nav {
    display: flex; flex-direction: column; gap: 2px;
    padding-bottom: var(--sp-4); margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
  }
  .side-nav a {
    display: flex; align-items: center; min-height: 44px;
    padding: 0 var(--sp-3); border-radius: var(--r-md);
    color: var(--text-2); text-decoration: none; font-size: 15px;
    transition: color var(--t), background var(--t);
  }
  .side-nav a:hover { color: var(--text); background: var(--surface-2); }
  .side-nav a.on { color: var(--text); background: var(--accent-soft); }
  .side {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
    z-index: 50; background: var(--bg); border-left: 1px solid var(--border);
    padding: var(--sp-4); overflow-y: auto;
    transform: translateX(102%); transition: transform 220ms var(--t);
  }
  .side.open { transform: none; }
  .side-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-3); font-weight: 600; padding-bottom: var(--sp-2);
  }
  /* `:not([hidden])` vacibdir — bunsuz author qaydası brauzerin [hidden]
     qaydasını üstələyir və qat həmişə açıq qalıb toxunuşları bloklayır. */
  .scrim:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .55);
  }
}

@media (max-width: 600px) {
  .hdr-inner { gap: var(--sp-4); }
  .hdr-right { gap: var(--sp-3); }
}

@media (max-width: 720px) {
  .shell { padding-top: var(--sp-8); padding-bottom: var(--sp-12); }
  .brand-text i { display: none; }
  .console-row { flex-direction: column; align-items: stretch; }
  .console-icon { top: 17px; }
  .submit { width: 100%; padding: 13px; }
  .paper { grid-template-columns: 1fr; gap: var(--sp-3); }
  .ring { width: 44px; height: 44px; }
  .ring svg { width: 44px; height: 44px; }
  .ring-label { display: none; }
  .card { padding: var(--sp-5); }
  .chart-wrap { height: 240px; }
  .hero { padding-top: var(--sp-2); }
  .toast { left: var(--sp-4); right: var(--sp-4); max-width: none; }
  .ftr-tech { display: none; }
}

/* §16: cavabın hansı korpusa əsaslandığı — sistem heç vaxt bütün elmi
   ədəbiyyatı təmsil etdiyini ima etməməlidir. */
.corpus-note {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-2); line-height: 1.5;
}
.cite { cursor: pointer; text-decoration: none; }
.cite:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Phase 4
   Trend təsnifatı (§12) və tədqiqat landşaftı (§11). */

.trend-classes { margin-top: 18px; display: grid; gap: 8px; }
.tc-head {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 2px;
}
.tc-row {
  display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: baseline;
  padding: 9px 12px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
}
.tc-badge {
  font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-2); white-space: nowrap;
}
.tc-up   .tc-badge { background: rgba(52,211,153,.14); color: #34D399; }
.tc-down .tc-badge { background: rgba(248,113,113,.14); color: #F87171; }
.tc-muted .tc-badge { background: var(--surface-3); color: var(--text-2); }
.tc-why { color: var(--text-2); font-size: 12.5px; line-height: 1.5; }

.lx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.lx-grid h3 {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2); margin: 0 0 10px;
}
.lx-cluster { margin-bottom: 10px; font-size: 13.5px; }
.lx-cluster b { display: inline-block; margin-right: 6px; }
.lx-cluster span { color: var(--text-2); font-size: 12.5px; }
.lx-bar { height: 4px; background: var(--surface-3); border-radius: 999px; margin-bottom: 6px; }
.lx-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.lx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.lx-list li {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13.5px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.lx-list li b { color: var(--accent-2); }

@media (max-width: 640px) {
  .tc-row { grid-template-columns: auto 1fr; }
  .tc-why { grid-column: 1 / -1; }
}

/* §6 + §19: sorğunun niyyəti və aktiv süzgəclər.
   Nəticələrin üstündə, amma diqqəti oğurlamadan — əsas axın axtarışdır. */
.plan-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 10px 14px;
  background: var(--accent-soft); border: 1px solid rgba(99,102,241,.22);
  border-radius: var(--r-md); font-size: 13px;
}
.plan-intent { color: var(--accent-2); }
.plan-go {
  background: var(--accent); color: #fff; border: 0;
  padding: 4px 12px; border-radius: 999px; font-size: 12.5px;
  font-weight: 600; cursor: pointer;
}
.plan-go:hover { background: var(--accent-2); }
.plan-filters { color: var(--text-2); margin-left: auto; }
@media (max-width: 640px) { .plan-filters { margin-left: 0; width: 100%; } }

/* Söhbət: əvvəlki növbələr və davam sahəsi.
   Əsas axtarış qutusu yeni sorğu üçündür; bura eyni mövzunu davam etdirir. */
.chat-history { margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-turn {
  padding: 10px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border); font-size: 13.5px; line-height: 1.55;
}
.chat-turn.user { background: var(--accent-soft); border-color: rgba(99,102,241,.22); }
.chat-turn.assistant { background: var(--surface-2); }
.chat-role {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-2); margin-bottom: 4px;
}
.chat-question {
  font-size: 14px; color: var(--text-2); margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.chat-next { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.chat-next input {
  flex: 1; min-width: 200px; padding: 10px 14px;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text); font-size: 14px; font-family: inherit;
}
.chat-next input:focus { outline: none; border-color: var(--accent); }
.chat-next button {
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  padding: 10px 18px; border-radius: var(--r-md); font-weight: 600; font-size: 13.5px;
}
.chat-next button:hover { background: var(--accent-2); }
.chat-reset { background: transparent !important; color: var(--text-2) !important; }
.chat-reset:hover { color: var(--text) !important; }

/* ============================================================== hesab qatı
   auth.js tərəfindən işlədilir. Mövcud dəyişənlərdən (--ink, --line, --acc…)
   istifadə edir ki, tema dəyişəndə bu blok da avtomatik uyğunlaşsın. */

.account { display: flex; align-items: center; }

.acct-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .62rem; border: 1px solid var(--border);
  border-radius: 8px; background: transparent; color: var(--text);
  font: inherit; font-size: .82rem; cursor: pointer; white-space: nowrap;
}
.acct-btn:hover { border-color: var(--accent); color: var(--accent); }

.acct-chip {
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .1rem .34rem; border-radius: 4px;
  background: var(--border); color: var(--text-2);
}
.acct-chip.pro { background: var(--accent); color: #fff; }
/* Kredit rəqəmi — nə qədər qaldığı həmişə görünsün, panel açmadan */
.acct-credits { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------------------------------------------------------------- modal */

.pm-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.pm-modal-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(2px); }
.pm-modal-box {
  position: relative; width: min(92vw, 440px); max-height: 88vh; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.pm-modal-box.wide { width: min(94vw, 760px); }
.pm-modal-x {
  position: absolute; top: .5rem; right: .6rem; width: 2rem; height: 2rem;
  border: 0; background: transparent; color: var(--text-2);
  font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 6px;
}
.pm-modal-x:hover { color: var(--text); background: var(--border); }
.pm-modal-title { margin: 0 0 .5rem; font-size: 1.12rem; }
.pm-email { margin: 0 0 1rem; color: var(--text-2); font-size: .84rem; word-break: break-all; }
.pm-note { margin: 0 0 1rem; padding: .55rem .7rem; border-radius: 8px;
  background: var(--border); color: var(--text); font-size: .84rem; }
.pm-why { margin: .9rem 0 0; color: var(--text-2); font-size: .78rem; line-height: 1.5; }

/* ----------------------------------------------------------------- form */

.pm-form { display: grid; gap: .8rem; }
.pm-form label { display: grid; gap: .3rem; font-size: .82rem; color: var(--text-2); }
.pm-form input {
  padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: .92rem;
}
.pm-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.pm-form small { color: var(--text-2); font-size: .72rem; }

.pm-primary {
  padding: .6rem 1rem; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer;
}
.pm-primary:hover { filter: brightness(1.08); }
.pm-primary:disabled { opacity: .6; cursor: default; }

.pm-ghost {
  padding: .6rem 1rem; border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--text-2); font: inherit; cursor: pointer;
}
.pm-ghost:hover { color: var(--text); border-color: var(--text-2); }

.pm-link {
  border: 0; background: transparent; color: var(--accent);
  font: inherit; cursor: pointer; padding: 0; text-decoration: underline;
}
.pm-alt { margin: 1rem 0 0; font-size: .82rem; color: var(--text-2); }
/* Xəta mesajı sakit qırmızıdır: forma xətası fəlakət deyil, düzəldiləsi şeydir */
.pm-err { margin: 0; color: var(--err); font-size: .82rem; }

/* ----------------------------------------------------------- hesab paneli */

.pm-stats { display: grid; gap: .55rem; margin: 0 0 .9rem; }
.pm-stats > div { display: flex; justify-content: space-between; align-items: center; }
.pm-stats dt { color: var(--text-2); font-size: .82rem; }
.pm-stats dd { margin: 0; font-variant-numeric: tabular-nums; font-size: .88rem; }

.pm-meter { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.pm-meter > span { display: block; height: 100%; background: var(--accent); }

.pm-actions { display: flex; gap: .55rem; margin-top: 1.2rem; }
.pm-actions > * { flex: 1; }

/* ------------------------------------------------------------- planlar */

.pm-plans { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .pm-plans { grid-template-columns: 1fr 1fr; } }

.pm-plan {
  border: 1px solid var(--border); border-radius: 10px; padding: 1rem .95rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.pm-plan.pro { border-color: var(--accent); }
.pm-plan h3 { margin: 0; font-size: .98rem; }
.pm-plan-price { margin: 0; color: var(--text-2); font-size: .8rem; }
.pm-plan ul { margin: 0; padding-left: 1.05rem; display: grid; gap: .34rem; }
.pm-plan li { font-size: .82rem; line-height: 1.45; color: var(--text); }
.pm-plan .pm-primary { margin-top: auto; }
.pm-current {
  margin-top: auto; text-align: center; padding: .5rem;
  font-size: .78rem; color: var(--text-2);
  border: 1px dashed var(--border); border-radius: 8px;
}

/* ========================================================== şəxsi sənədlər
   documents.js işlədir. Mövcud dəyişənlərdən istifadə edir ki, tema
   dəyişəndə bu blok da uyğunlaşsın. */

.doc-drop {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3, 12px);
  padding: var(--sp-8, 32px) var(--sp-5, 20px);
  border: 1.5px dashed var(--border-2);
  border-radius: var(--r-lg, 14px);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  text-align: center;
}
.doc-drop:hover { border-color: var(--accent); color: var(--text); }
/* Sürükləyərkən hədəfin aydın görünməsi vacibdir — əks halda istifadəçi
   faylı buraxacağı yeri təxmin edir. */
.doc-drop.over {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

.doc-note {
  margin: var(--sp-3, 12px) 0 0;
  font-size: .85rem;
  color: var(--text-2);
}
.doc-note.bad { color: var(--err); }

.doc {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  padding: var(--sp-4, 16px);
  margin-top: var(--sp-4, 16px);
}
.doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4, 16px); }
.doc-name b { display: block; font-size: .95rem; }
.doc-name small { color: var(--text-3); font-size: .78rem; }

.doc-status {
  flex-shrink: 0;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .15rem .45rem; border-radius: var(--r-sm, 6px);
  background: var(--surface-2); color: var(--text-2);
}
.doc-status.ok  { background: var(--ok-soft);  color: var(--ok); }
.doc-status.bad { background: var(--err-soft); color: var(--err); }
/* «hazırlanır» yanıb-sönür: emal fonda gedir və statik etiket donmuş görünür */
.doc-status.wait { animation: docPulse 1.6s ease-in-out infinite; }
@keyframes docPulse { 50% { opacity: .45; } }

.doc-error { margin: var(--sp-3, 12px) 0 0; color: var(--err); font-size: .84rem; }

.doc-ask { display: flex; gap: var(--sp-2, 8px); margin-top: var(--sp-4, 16px); }
.doc-ask input {
  flex: 1; min-width: 0;
  padding: .5rem .65rem;
  border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
  background: var(--bg); color: var(--text); font: inherit; font-size: .9rem;
}
.doc-ask input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.doc-ask button {
  padding: .5rem .9rem; border: 0; border-radius: var(--r-sm, 6px);
  background: var(--accent); color: #fff; font: inherit; cursor: pointer;
}
.doc-ask button:disabled { opacity: .6; cursor: default; }

.doc-answer:empty { display: none; }
.doc-answer-body { margin-top: var(--sp-4, 16px); line-height: 1.65; }

/* İstinad nişanı — cavabdakı [1] ilə mənbə siyahısındakı 1 eyni görünməlidir,
   yoxsa oxucu əlaqəni qurmur. */
.cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15em; height: 1.15em; padding: 0 .25em;
  border-radius: var(--r-sm, 6px);
  background: var(--accent-soft); color: var(--accent-2);
  font-size: .72em; font-weight: 600; vertical-align: super;
}

.doc-sources { margin: var(--sp-4, 16px) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2, 8px); }
.doc-sources li {
  display: grid; grid-template-columns: auto auto 1fr; gap: .5rem .6rem;
  align-items: baseline;
  padding: var(--sp-3, 12px);
  background: var(--surface-2); border-radius: var(--r-sm, 6px);
  font-size: .84rem;
}
.doc-sources li .cite { vertical-align: baseline; }
.doc-sources li p { grid-column: 1 / -1; margin: 0; color: var(--text-2); line-height: 1.5; }
.doc-score { color: var(--text-3); font-variant-numeric: tabular-nums; }

.doc-del {
  margin-top: var(--sp-4, 16px);
  border: 0; background: transparent;
  color: var(--text-3); font: inherit; font-size: .8rem;
  cursor: pointer; padding: 0;
}
.doc-del:hover { color: var(--err); }

/* Altbilgidəki düymə keçid kimi görünməlidir — yanındakılar <a>-dır.

   `margin-left: auto` BUNA verilir, çünki mövcud qayda onu `.ftr a`-ya
   verirdi və boşluğu BİRİNCİ keçid udurdu. Düymə onlardan əvvəl gəldiyi
   üçün, düzəliş olmasa qiymət keçidi solda tək qalar, qalan üçü sağda
   olardı. `~ a` sonrakı keçidlərdən avtomatik boşluğu götürür ki, dördü
   birlikdə sağda dursun. */
.ftr-link {
  margin-left: auto;
  background: none; border: 0; padding: 0;
  color: var(--text-3); font-size: 12px; text-decoration: none;
  transition: color var(--t);
}
.ftr-link ~ a { margin-left: 0; }
.ftr-link:hover { color: var(--text-2); text-decoration: underline; }

@media (pointer: coarse) { .ftr-link { min-height: 44px; } }