/* ═══════════════════════════════════════════════════
   THEME TOKENS
═══════════════════════════════════════════════════ */
:root {
  --transition-theme: background .25s ease, color .25s ease, border-color .2s ease, box-shadow .2s ease;
}

[data-theme="dark"] {
  --bg:       #07090f;
  --bg2:      #0d1018;
  --bg3:      #141720;
  --bg4:      #1c2030;
  --border:   #242840;
  --border2:  #2a2f44;
  --border3:  #353b56;
  --text:     #dde2f0;
  --t2:       #8892b0;
  --t3:       #4e5878;
  --gold:     #f5c842;
  --gold2:    #ffd96e;
  --goldbg:   rgba(245,200,66,.09);
  --teal:     #2de2c8;
  --sky:      #5bc8f5;
  --rose:     #ff6b8a;
  --violet:   #b48eff;
  --green:    #3ddc97;
  --q1c: #3ddc97; --q1b: rgba(61,220,151,.12);
  --q2c: #5bc8f5; --q2b: rgba(91,200,245,.12);
  --q3c: #f5c842; --q3b: rgba(245,200,66,.12);
  --q4c: #ff6b8a; --q4b: rgba(255,107,138,.12);
  --shadow-card: 0 8px 32px rgba(0,0,0,.45);
  --hero-glow: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(245,200,66,.07) 0%, transparent 65%);
  --noise-opacity: .4;
  --grid-color: rgba(93,100,160,.06);
  --search-bg: rgba(13,16,24,.92);
  --search-border: rgba(42,47,68,.9);
}

[data-theme="light"] {
  --bg:       #f4f5f9;
  --bg2:      #ffffff;
  --bg3:      #f0f1f7;
  --bg4:      #e8eaf2;
  --border:   #d4d8e8;
  --border2:  #c4c9dc;
  --border3:  #b0b7cf;
  --text:     #1a1e2e;
  --t2:       #4a5270;
  --t3:       #8890aa;
  --gold:     #c8960a;
  --gold2:    #e0a800;
  --goldbg:   rgba(200,150,10,.08);
  --teal:     #0e9580;
  --sky:      #2577b5;
  --rose:     #d43060;
  --violet:   #7c52d4;
  --green:    #1c9c60;
  --q1c: #1c9c60; --q1b: rgba(28,156,96,.1);
  --q2c: #2577b5; --q2b: rgba(37,119,181,.1);
  --q3c: #c8960a; --q3b: rgba(200,150,10,.1);
  --q4c: #d43060; --q4b: rgba(212,48,96,.1);
  --shadow-card: 0 4px 20px rgba(0,0,0,.1);
  --hero-glow: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(200,150,10,.06) 0%, transparent 65%);
  --noise-opacity: .15;
  --grid-color: rgba(100,108,160,.05);
  --search-bg: rgba(255,255,255,.95);
  --search-border: rgba(212,216,232,.95);
}

/* ═══════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: var(--transition-theme);
}

/* noise */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0; opacity: var(--noise-opacity);
  transition: opacity .25s;
}
/* grid */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events:none; z-index:0;
}

/* ═══════════════════════════════════════════════════
   HERO WRAP
═══════════════════════════════════════════════════ */
.page-hero-wrap {
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
}

@media(min-width:641px) {
  .page-hero-wrap { min-height: 100vh; transition: min-height .4s ease; }
  .page-hero-wrap.has-results { min-height: unset; }
  .hero-center { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding-bottom: 8vh; transition: all .4s ease; }
  .page-hero-wrap.has-results .hero-center { display:block; padding-bottom:0; }

  .home-title { text-align:center; margin-bottom:38px; transition: opacity .3s, max-height .4s; overflow:hidden; max-height:260px; }
  .page-hero-wrap.has-results .home-title { opacity:0; max-height:0; margin-bottom:0; pointer-events:none; }

  .topbar { opacity:0; pointer-events:none; max-height:0; overflow:hidden; padding-top:0; padding-bottom:0; transition: opacity .3s, max-height .35s, padding .35s; }
  .page-hero-wrap.has-results .topbar { opacity:1; pointer-events:auto; max-height:80px; padding-top:14px; padding-bottom:14px; }
}

@media(max-width:640px) {
  .topbar { opacity:1!important; pointer-events:auto!important; max-height:none!important; overflow:visible!important; padding-top:14px!important; padding-bottom:14px!important; }
  .home-title { text-align:center; margin-bottom:22px; }
  .hero-center { padding: 0; }
}

/* ═══════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════ */
.topbar {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  max-width: 1100px; margin: 0 auto; gap: 12px;
}
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-icon {
  width:36px; height:36px;
  background: var(--gold);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Serif Display',serif; font-weight:400; font-size:13px;
  color:#000; letter-spacing:-.5px;
  box-shadow: 0 0 20px rgba(245,200,66,.3);
  flex-shrink:0;
  transition: box-shadow .25s;
}
[data-theme="light"] .brand-icon { box-shadow: 0 2px 12px rgba(200,150,10,.25); }
.brand-text {}
.brand-name {
  font-family: 'DM Serif Display', serif;
  font-size: 1.05rem; line-height:1.2; letter-spacing:-.2px;
}
.brand-name span { color: var(--gold); transition: color .25s; }
.brand-ver { font-family:'DM Sans',sans-serif; font-size:.55rem; color:var(--t3); font-weight:400; margin-left:3px; vertical-align:middle; }
.brand-sub { font-size:.52rem; color:var(--t3); letter-spacing:2.5px; text-transform:uppercase; margin-top:1px; transition: color .25s; }

.topbar-right { display:flex; gap:7px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

/* pill buttons */
.pill {
  font-size:.62rem; letter-spacing:.3px; padding:7px 14px;
  border-radius:100px; border:1px solid var(--border2);
  background: var(--bg3); color:var(--t2);
  cursor:pointer; transition: all .18s; white-space:nowrap;
  text-decoration:none; display:inline-flex; align-items:center; gap:5px;
  min-height:38px; font-family:'DM Sans',sans-serif; font-weight:500;
}
.pill:hover { border-color:var(--gold); color:var(--gold); background:var(--goldbg); }
.pill.accent { background:var(--gold); color:#000; border-color:var(--gold); font-weight:700; }
.pill.accent:hover { background:var(--gold2); }
#exportPill { display:none; }
#exportPill .cnt { background:#000; color:var(--gold); border-radius:100px; padding:1px 6px; font-size:.55rem; margin-left:2px; }

/* ── THEME TOGGLE ── */
.theme-toggle {
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:100px;
  border:1px solid var(--border2); background:var(--bg3);
  cursor:pointer; font-size:.95rem; transition:all .18s;
  flex-shrink:0;
}
.theme-toggle:hover { border-color:var(--gold); background:var(--goldbg); }
.theme-toggle .icon-dark { display:block; }
.theme-toggle .icon-light { display:none; }
[data-theme="light"] .theme-toggle .icon-dark { display:none; }
[data-theme="light"] .theme-toggle .icon-light { display:block; }

@media(max-width:640px) {
  .pill-hide-sm { display:none!important; }
  .topbar { padding: 12px 16px; }
}

/* ═══════════════════════════════════════════════════
   HOME TITLE (HERO)
═══════════════════════════════════════════════════ */
.home-title { padding:0 16px; position:relative; }
.hero-glow {
  position:absolute; inset:0; pointer-events:none;
  background: var(--hero-glow);
  z-index:-1; transition: var(--transition-theme);
}
.home-title h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.4rem, 7vw, 3.8rem);
  letter-spacing: -.5px; line-height: 1.12;
  margin-bottom: 14px; font-weight:400;
  color: var(--text); transition: color .25s;
}
.home-title h1 em {
  font-style: italic; color: var(--gold); transition: color .25s;
}
.home-title .subtitle {
  font-size: clamp(.82rem,.9vw+.4rem,.95rem);
  color: var(--t2); max-width:460px; margin:0 auto;
  line-height: 1.85; font-weight:400; transition: color .25s;
}
.hero-badges {
  display:flex; justify-content:center; gap:8px; margin-top:18px; flex-wrap:wrap;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.6rem; letter-spacing:.5px; text-transform:uppercase; font-weight:600;
  padding:5px 12px; border-radius:100px;
  border:1px solid var(--border2); color:var(--t3);
  background:var(--bg3); transition: var(--transition-theme);
}

/* ═══════════════════════════════════════════════════
   SEARCH AREA
═══════════════════════════════════════════════════ */
.search-wrap {
  position: relative; z-index: 20;
  width: 100%; max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}
/* wider on non-hero state */
.page-hero-wrap.has-results .search-wrap {
  max-width: 1100px;
}

.search-box {
  display:flex; background: var(--search-bg);
  border: 1.5px solid var(--search-border);
  border-radius: 14px; overflow:hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04) inset;
  transition: border-color .2s, box-shadow .2s, background .25s;
  backdrop-filter: blur(12px);
}
[data-theme="light"] .search-box {
  box-shadow: 0 6px 28px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.03) inset;
}
.search-box:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(245,200,66,.1), 0 12px 48px rgba(0,0,0,.3);
}
[data-theme="light"] .search-box:focus-within {
  box-shadow: 0 0 0 4px rgba(200,150,10,.1), 0 6px 28px rgba(0,0,0,.12);
}

.search-pfx {
  padding: 0 16px; display:flex; align-items:center;
  color: var(--t3); font-size:1.1rem; flex-shrink:0;
  transition: color .2s;
}
.search-box:focus-within .search-pfx { color: var(--gold); }

#q {
  flex:1; background:transparent; border:none; outline:none;
  color: var(--text); font-family:'DM Sans',sans-serif;
  font-size: clamp(.88rem,1vw+.5rem,1rem); font-weight:400;
  padding: 16px 4px; min-width:0; transition: color .25s;
}
#q::placeholder { color: var(--t3); }

#goBtn {
  background: var(--gold); color:#000; border:none;
  padding: 0 28px; margin:6px;
  font-family:'DM Sans',sans-serif; font-weight:700;
  font-size:.72rem; letter-spacing:1.2px; text-transform:uppercase;
  cursor:pointer; transition:background .15s, transform .1s;
  border-radius:9px; flex-shrink:0; min-height:42px;
}
#goBtn:hover { background:var(--gold2); transform:scale(1.01); }
#goBtn:active { transform:scale(.98); }
#goBtn:disabled { opacity:.4; cursor:not-allowed; transform:none; }

/* ── SEARCH MODE ── */
.search-mode-row {
  display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; align-items:center; padding:0 2px;
}
.smode-label {
  font-size:.58rem; color:var(--t3); letter-spacing:1px; text-transform:uppercase;
  white-space:nowrap; font-weight:600; padding:0 2px;
}
.smode-btn {
  font-size:.62rem; padding:6px 13px; border-radius:100px;
  border:1px solid var(--border); background:transparent; color:var(--t3);
  cursor:pointer; transition:all .15s; white-space:nowrap; min-height:34px;
  font-family:'DM Sans',sans-serif; font-weight:500;
}
.smode-btn:hover { border-color:var(--gold); color:var(--gold); }
.smode-btn.on { border-color:var(--gold); color:var(--gold); background:var(--goldbg); font-weight:600; }

/* ── FILTER TOGGLE ── */
.filter-toggle { display:flex; align-items:center; gap:8px; margin-top:8px; cursor:pointer; user-select:none; width:fit-content; }
.filter-toggle-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bg3); border:1px solid var(--border); border-radius:100px;
  padding:7px 14px; font-size:.62rem; color:var(--t2); font-weight:500;
  transition:all .15s; min-height:34px; font-family:'DM Sans',sans-serif;
}
.filter-toggle-pill:hover { border-color:var(--gold); color:var(--gold); }
.filter-toggle-pill.has-active { border-color:var(--gold); color:var(--gold); background:var(--goldbg); }
.ftoggle-icon { font-size:.75rem; transition:transform .2s; display:inline-block; }
.ftoggle-icon.open { transform:rotate(180deg); }
.filter-active-count { background:var(--gold); color:#000; border-radius:100px; padding:1px 7px; font-size:.58rem; font-weight:700; }

/* ── FILTER PANEL ── */
.filter-panel {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:12px; padding:18px; margin-top:8px;
  display:none; flex-direction:column; gap:13px;
  box-shadow: var(--shadow-card); transition: var(--transition-theme);
}
.filter-panel.open { display:flex; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.frow.single { grid-template-columns:1fr; }
@media(max-width:480px) { .frow { grid-template-columns:1fr; } }
.fgroup { display:flex; flex-direction:column; gap:5px; }
.flabel { font-size:.57rem; color:var(--t3); letter-spacing:1.2px; text-transform:uppercase; font-weight:600; }
.fselect, .finput {
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); padding:10px 12px; border-radius:8px;
  font-family:'DM Sans',sans-serif; font-size:.8rem; outline:none; width:100%;
  transition: border-color .15s, background .25s, color .25s;
  appearance:none; -webkit-appearance:none; min-height:42px;
}
.fselect {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234e5878'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:30px;
}
[data-theme="light"] .fselect {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238890aa'/%3E%3C/svg%3E");
}
.fselect:focus, .finput:focus { border-color:var(--gold); }
.finput::placeholder { color:var(--t3); }
.filter-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:10px; border-top:1px solid var(--border); }
.fbtn {
  font-size:.68rem; padding:9px 18px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border2); background:transparent; color:var(--t2);
  transition:all .15s; min-height:38px; font-family:'DM Sans',sans-serif; font-weight:500;
}
.fbtn:hover { border-color:var(--gold); color:var(--gold); }
.fbtn.apply { background:var(--gold); color:#000; border-color:var(--gold); font-weight:700; }
.fbtn.apply:hover { background:var(--gold2); }

/* ═══════════════════════════════════════════════════
   MAIN / RESULTS
═══════════════════════════════════════════════════ */
.main {
  position:relative; z-index:10;
  max-width:1100px; margin:0 auto;
  padding:0 24px 120px;
  transition: padding .3s;
}
@media(max-width:640px) { .main { padding:0 14px 100px; } }

.results-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--border); min-height:48px;
  flex-wrap:wrap; gap:8px; margin-top:14px;
  transition: border-color .25s;
}
.rcount { font-size:.7rem; color:var(--t2); font-weight:500; }
.rcount strong { color:var(--gold); }
.rsort select {
  background:var(--bg3); border:1px solid var(--border);
  color:var(--t2); padding:7px 10px; border-radius:7px;
  font-family:'DM Sans',sans-serif; font-size:.65rem; outline:none;
  cursor:pointer; min-height:36px; max-width:200px;
  transition: var(--transition-theme);
}

/* ═══════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════ */
.card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:18px; margin-bottom:9px;
  position:relative; overflow:hidden;
  transition: border-color .2s, transform .15s, box-shadow .2s, background .25s;
  animation: up .22s ease both;
}
@keyframes up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@media(hover:hover) {
  .card:hover { border-color:var(--border3); transform:translateY(-1px); box-shadow:var(--shadow-card); }
}
.card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--border2); transition:background .3s; }
.card.q1::before { background:var(--q1c); }
.card.q2::before { background:var(--q2c); }
.card.q3::before { background:var(--q3c); }
.card.q4::before { background:var(--q4c); }

/* checkbox */
.cb {
  position:absolute; top:14px; right:14px;
  width:22px; height:22px; border-radius:5px;
  border:1.5px solid var(--border2); background:var(--bg3);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--gold);
  transition:all .15s; touch-action:manipulation;
}
.cb:hover { border-color:var(--gold); }
.cb.on { background:var(--gold); border-color:var(--gold); color:#000; }

/* badges */
.badges { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:9px; padding-right:32px; }
.b { font-size:.58rem; padding:3px 8px; border-radius:100px; border:1px solid; white-space:nowrap; font-weight:600; letter-spacing:.3px; }
.b-oa { color:var(--teal); border-color:rgba(45,226,200,.3); background:rgba(45,226,200,.07); }
[data-theme="light"] .b-oa { color:#0e9580; border-color:rgba(14,149,128,.3); background:rgba(14,149,128,.07); }
.b-q1 { color:var(--q1c); border-color:rgba(61,220,151,.3); background:var(--q1b); }
.b-q2 { color:var(--q2c); border-color:rgba(91,200,245,.3); background:var(--q2b); }
.b-q3 { color:var(--q3c); border-color:rgba(245,200,66,.3); background:var(--q3b); }
.b-q4 { color:var(--q4c); border-color:rgba(255,107,138,.3); background:var(--q4b); }
.b-s1 { color:#d946ef; border-color:rgba(217,70,239,.3); background:rgba(217,70,239,.07); }
.b-s2 { color:#a855f7; border-color:rgba(168,85,247,.3); background:rgba(168,85,247,.07); }
.b-s3 { color:#818cf8; border-color:rgba(129,140,248,.3); background:rgba(129,140,248,.07); }
.b-s4 { color:var(--q2c); border-color:rgba(91,200,245,.3); background:var(--q2b); }
.b-s5 { color:var(--q1c); border-color:rgba(61,220,151,.3); background:var(--q1b); }
.b-s6 { color:var(--t3); border-color:var(--border); background:var(--bg3); }
.b-yr, .b-tp { color:var(--t3); border-color:var(--border); background:var(--bg3); }
.b-load { color:var(--t3); border-color:var(--border); background:transparent; animation:blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:.25} 50%{opacity:.8} }

/* card content */
.ctitle {
  font-family:'DM Serif Display',serif; font-size:1rem; font-weight:400;
  line-height:1.55; color:var(--text); cursor:pointer; margin-bottom:8px;
  padding-right:30px; transition:color .15s;
}
.ctitle:hover { color:var(--gold); }
.cauth { font-size:.76rem; color:var(--t2); margin-bottom:5px; line-height:1.55; }
.cjrnl { font-size:.68rem; color:var(--sky); margin-bottom:9px; font-weight:500; }
.cjrnl a { color:inherit; text-decoration:none; } .cjrnl a:hover { text-decoration:underline; }
.cabst { font-size:.76rem; color:var(--t3); line-height:1.8; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:11px; transition: color .25s; }

/* card footer */
.cfoot {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:11px; border-top:1px solid var(--border);
  flex-wrap:wrap; gap:7px; transition: border-color .25s;
}
.cmeta { display:flex; gap:12px; flex-wrap:wrap; }
.cm { display:flex; align-items:center; gap:4px; font-size:.63rem; color:var(--t3); }
.cacts { display:flex; gap:5px; flex-wrap:wrap; }
@media(max-width:480px) {
  .cacts { overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .cacts::-webkit-scrollbar { display:none; }
  .cfoot { flex-direction:column; align-items:flex-start; }
}

.btn {
  font-size:.62rem; padding:6px 12px; border-radius:6px;
  text-decoration:none; cursor:pointer; border:1px solid;
  display:inline-flex; align-items:center; gap:3px;
  transition:all .15s; white-space:nowrap; font-weight:500;
  min-height:34px; font-family:'DM Sans',sans-serif; touch-action:manipulation;
}
.btn-pdf { color:var(--q1c); border-color:rgba(61,220,151,.3); background:var(--q1b); } .btn-pdf:hover { filter:brightness(1.1); }
.btn-doi { color:var(--t2); border-color:var(--border2); background:var(--bg3); } .btn-doi:hover { border-color:var(--gold); color:var(--gold); }
.btn-bib { color:var(--gold); border-color:rgba(245,200,66,.3); background:var(--goldbg); } .btn-bib:hover { filter:brightness(1.1); }
.btn-save { color:var(--gold); border-color:rgba(245,200,66,.3); background:var(--goldbg); } .btn-save:hover { filter:brightness(1.1); }
.btn-save.saved { color:#000; background:var(--gold); border-color:var(--gold); } .btn-save.saved:hover { background:var(--gold2); }

/* retraction */
.b-retracted { color:#fff!important; border-color:#ff2d55!important; background:#ff2d55!important; font-weight:700; }
.card.retracted { border-color:rgba(255,45,85,.4)!important; }
.card.retracted::before { background:#ff2d55!important; }
.retract-detail { background:rgba(255,45,85,.07); border:1px solid rgba(255,45,85,.2); border-radius:8px; padding:9px 13px; margin-bottom:10px; font-size:.75rem; color:#ff8099; line-height:1.65; }
.retract-detail strong { color:#ff2d55; }

/* ═══════════════════════════════════════════════════
   TREND CHART
═══════════════════════════════════════════════════ */
.trend-wrap {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:20px 18px 16px;
  margin-top:16px; position:relative; overflow:hidden;
  transition: var(--transition-theme);
}
.trend-wrap::before { content:''; position:absolute; inset:0; background:var(--hero-glow); pointer-events:none; }
.trend-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.trend-title { font-size:.65rem; color:var(--t2); letter-spacing:1.2px; text-transform:uppercase; display:flex; align-items:center; gap:6px; font-weight:600; }
.trend-title strong { color:var(--gold); }
.trend-subtitle { font-size:.55rem; color:var(--t3); margin-top:3px; }
.trend-stats { display:flex; gap:16px; flex-wrap:wrap; }
.tstat { text-align:center; }
.tstat-val { font-family:'DM Serif Display',serif; font-size:1.3rem; color:var(--gold); line-height:1; }
.tstat-lbl { font-size:.52rem; color:var(--t3); letter-spacing:.8px; text-transform:uppercase; margin-top:3px; }
.trend-svg-wrap { width:100%; overflow:hidden; border-radius:6px; }
.trend-svg-wrap svg { width:100%; display:block; }
.trend-bar { fill:var(--border2); transition:fill .15s; cursor:pointer; }
.trend-bar:hover, .trend-bar.peak { fill:var(--gold); opacity:.7; }
.trend-bar.recent { fill:var(--gold); opacity:.45; }
.trend-line { fill:none; stroke:var(--gold); stroke-width:2; stroke-linejoin:round; }
.trend-area { fill:url(#trendGrad); opacity:.3; }
.trend-dot { fill:var(--gold); stroke:var(--bg2); stroke-width:1.5; cursor:pointer; transition:r .12s; }
.trend-dot:hover { r:5; }
.trend-xlabel { font-family:'DM Sans',sans-serif; font-size:8px; fill:var(--t3); text-anchor:middle; }
.trend-ylabel { font-family:'DM Sans',sans-serif; font-size:7px; fill:var(--t3); text-anchor:end; }
.trend-grid { stroke:var(--border); stroke-width:.5; }
.trend-tooltip { position:absolute; background:var(--bg3); border:1px solid var(--border2); border-radius:7px; padding:7px 12px; font-size:.65rem; color:var(--text); pointer-events:none; opacity:0; transition:opacity .12s; white-space:nowrap; z-index:10; box-shadow:0 4px 20px rgba(0,0,0,.3); }
.trend-tooltip.show { opacity:1; }
.trend-toggle { display:flex; gap:6px; margin-top:10px; }
.ttoggle-btn { font-size:.58rem; padding:5px 12px; border-radius:100px; border:1px solid var(--border); background:transparent; color:var(--t3); cursor:pointer; transition:all .15s; min-height:30px; font-family:'DM Sans',sans-serif; }
.ttoggle-btn:hover, .ttoggle-btn.on { border-color:var(--gold); color:var(--gold); background:var(--goldbg); }
.trend-loading { text-align:center; padding:32px 0; font-size:.65rem; color:var(--t3); letter-spacing:1.5px; }

/* ═══════════════════════════════════════════════════
   LOADING / EMPTY
═══════════════════════════════════════════════════ */
.loading { text-align:center; padding:70px 0; }
.spinner { width:36px; height:36px; border:2px solid var(--border2); border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 14px; }
@keyframes spin { to{transform:rotate(360deg)} }
.loading p { font-size:.68rem; color:var(--t3); letter-spacing:2px; }
.empty { text-align:center; padding:80px 0; }
.empty-ic { font-size:3rem; opacity:.2; margin-bottom:14px; }
.empty h3 { font-family:'DM Serif Display',serif; font-size:1.3rem; color:var(--t2); margin-bottom:6px; font-weight:400; }
.empty p { font-size:.8rem; color:var(--t3); }

/* ═══════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════ */
.pager { display:flex; justify-content:center; gap:5px; margin-top:22px; flex-wrap:wrap; align-items:center; }
.pg { background:var(--bg3); border:1px solid var(--border); color:var(--t2); padding:8px 14px; border-radius:7px; font-size:.65rem; cursor:pointer; transition:all .15s; min-height:42px; font-family:'DM Sans',sans-serif; font-weight:500; }
.pg:hover, .pg.on { border-color:var(--gold); color:var(--gold); background:var(--goldbg); }
.pg:disabled { opacity:.25; cursor:not-allowed; pointer-events:none; }
.pg-sep { color:var(--t3); font-size:.65rem; padding:0 2px; }

/* ═══════════════════════════════════════════════════
   KOLEKSI PANEL
═══════════════════════════════════════════════════ */
.koleksi-overlay { position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(8px); z-index:200; display:none; align-items:flex-start; justify-content:flex-end; }
.koleksi-overlay.show { display:flex; }
.koleksi-panel { background:var(--bg2); border-left:1px solid var(--border2); width:min(420px,100vw); height:100vh; display:flex; flex-direction:column; box-shadow:-28px 0 80px rgba(0,0,0,.6); animation:slideIn .22s ease; transition: var(--transition-theme); }
@keyframes slideIn { from{transform:translateX(100%)} to{transform:translateX(0)} }
.koleksi-head { padding:16px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.koleksi-title { font-family:'DM Serif Display',serif; font-size:1rem; display:flex; align-items:center; gap:8px; }
.koleksi-count { background:var(--gold); color:#000; border-radius:100px; padding:1px 8px; font-size:.58rem; font-weight:700; }
.koleksi-body { flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.koleksi-empty { text-align:center; padding:60px 20px; color:var(--t3); font-size:.8rem; }
.koleksi-empty .ei { font-size:2.4rem; opacity:.25; margin-bottom:10px; }
.kcard { background:var(--bg3); border:1px solid var(--border); border-radius:9px; padding:13px 15px; position:relative; transition: var(--transition-theme); }
.kcard-title { font-family:'DM Serif Display',serif; font-size:.9rem; line-height:1.48; color:var(--text); margin-bottom:5px; padding-right:22px; cursor:pointer; font-weight:400; }
.kcard-title:hover { color:var(--gold); }
.kcard-meta { font-size:.62rem; color:var(--t3); margin-bottom:7px; line-height:1.65; }
.kcard-del { position:absolute; top:10px; right:10px; background:transparent; border:none; color:var(--t3); cursor:pointer; font-size:.85rem; transition:color .15s; padding:4px; min-width:28px; min-height:28px; display:flex; align-items:center; justify-content:center; }
.kcard-del:hover { color:var(--rose); }
.kcard-acts { display:flex; gap:5px; flex-wrap:wrap; }
.koleksi-foot { padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:7px; justify-content:flex-end; flex-shrink:0; }
.koleksi-retracted-badge { display:inline-flex; align-items:center; gap:4px; background:rgba(255,45,85,.1); border:1px solid rgba(255,45,85,.28); color:#ff2d55; border-radius:100px; padding:1px 7px; font-size:.55rem; font-weight:700; margin-bottom:5px; }

/* ═══════════════════════════════════════════════════
   EXPORT BAR
═══════════════════════════════════════════════════ */
.xbar { position:fixed; bottom:0; left:0; right:0; z-index:100; background:var(--bg2); border-top:1px solid var(--border2); padding:11px 18px; display:none; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; box-shadow:0 -8px 32px rgba(0,0,0,.35); transition: var(--transition-theme); }
.xbar.show { display:flex; }
.xinfo { font-size:.72rem; color:var(--t2); font-weight:500; } .xinfo strong { color:var(--gold); }
.xacts { display:flex; gap:7px; }
.xbtn { background:var(--gold); color:#000; border:none; padding:10px 20px; border-radius:7px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:.72rem; cursor:pointer; transition:background .15s; display:flex; align-items:center; gap:5px; min-height:42px; }
.xbtn:hover { background:var(--gold2); }
.xclear { background:transparent; border:1px solid var(--border2); color:var(--t2); padding:10px 14px; border-radius:7px; font-size:.65rem; cursor:pointer; transition:all .15s; min-height:42px; font-family:'DM Sans',sans-serif; }
.xclear:hover { border-color:var(--rose); color:var(--rose); }

/* ═══════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════ */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(8px); z-index:200; display:none; align-items:center; justify-content:center; padding:16px; }
.overlay.show { display:flex; }
.modal { background:var(--bg2); border:1px solid var(--border2); border-radius:14px; max-width:640px; width:100%; max-height:85vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 28px 80px rgba(0,0,0,.7); transition: var(--transition-theme); }
.mhead { padding:15px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.mtitle { font-family:'DM Serif Display',serif; font-size:.95rem; }
.mclose { background:var(--bg3); border:none; color:var(--t2); width:30px; height:30px; border-radius:6px; cursor:pointer; font-size:.9rem; transition:all .15s; display:flex; align-items:center; justify-content:center; min-width:30px; }
.mclose:hover { background:var(--rose); color:#fff; }
.mbody { padding:14px 18px; overflow-y:auto; flex:1; }
.bib { background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:14px; font-family:monospace; font-size:.68rem; line-height:1.85; color:var(--teal); white-space:pre-wrap; word-break:break-all; overflow-x:auto; max-height:280px; overflow-y:auto; }
.mfoot { padding:12px 18px; border-top:1px solid var(--border); display:flex; gap:7px; justify-content:flex-end; }

/* ═══════════════════════════════════════════════════
   TRAKTEER
═══════════════════════════════════════════════════ */
.trakteer-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.64rem; letter-spacing:.3px; padding:8px 16px;
  border-radius:100px; border:1px solid rgba(255,107,138,.35);
  background:rgba(255,107,138,.06); color:#ff8099;
  cursor:pointer; transition:all .18s; white-space:nowrap;
  text-decoration:none; font-family:'DM Sans',sans-serif; font-weight:500; min-height:36px;
}
.trakteer-btn:hover { border-color:var(--rose); color:var(--rose); background:rgba(255,107,138,.12); transform:translateY(-1px); box-shadow:0 4px 16px rgba(255,107,138,.18); }
.heart { display:inline-block; animation:heartbeat 1.6s ease infinite; }
@keyframes heartbeat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.28)} 28%{transform:scale(1)} 42%{transform:scale(1.18)} 70%{transform:scale(1)} }

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
.site-footer { position:relative; z-index:10; max-width:1100px; margin:0 auto; padding:28px 24px 48px; display:flex; flex-direction:column; align-items:center; gap:14px; border-top:1px solid var(--border); transition: border-color .25s; }
.footer-tagline { font-size:.7rem; color:var(--t3); text-align:center; line-height:1.7; }
.footer-tagline strong { color:var(--t2); }
.footer-links { display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:center; }
.footer-link { font-size:.62rem; color:var(--t3); text-decoration:none; transition:color .15s; font-weight:500; }
.footer-link:hover { color:var(--gold); }

/* ═══════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════ */
.toast { position:fixed; bottom:76px; right:18px; z-index:300; background:var(--bg3); border:1px solid var(--border2); border-radius:9px; padding:10px 15px; font-size:.68rem; color:var(--text); box-shadow:0 8px 28px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:270px; transform:translateY(4px); }
.toast.show { opacity:1; transform:translateY(0); }
@media(max-width:640px) { .toast { bottom:82px; right:12px; left:12px; max-width:none; text-align:center; } }

/* scrollbar */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
/* ═══════════════════════════════════════════════════
   SEARCH HISTORY
═══════════════════════════════════════════════════ */
.history-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(6px); z-index:200; display:none; align-items:flex-start; justify-content:center; padding-top:80px; }
.history-overlay.show { display:flex; }
.history-panel { background:var(--bg2); border:1px solid var(--border2); border-radius:14px; width:min(560px,94vw); max-height:70vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 24px 80px rgba(0,0,0,.6); animation:fadeUp .2s ease; transition:var(--transition-theme); }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.history-head { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.history-title { font-family:'DM Serif Display',serif; font-size:.95rem; display:flex; align-items:center; gap:8px; }
.history-head-acts { display:flex; gap:7px; align-items:center; }
.history-body { flex:1; overflow-y:auto; padding:8px 10px; }
.hist-empty { text-align:center; padding:32px 16px; font-size:.78rem; color:var(--t3); }
.hist-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; transition:background .12s; border:1px solid transparent; }
.hist-item:hover { background:var(--bg3); border-color:var(--border); }
.hist-icon { font-size:.85rem; flex-shrink:0; opacity:.5; }
.hist-q { flex:1; font-size:.82rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist-time { font-size:.6rem; color:var(--t3); white-space:nowrap; flex-shrink:0; }
.hist-del { background:transparent; border:none; color:var(--t3); cursor:pointer; font-size:.7rem; padding:3px 5px; border-radius:4px; transition:color .12s; flex-shrink:0; min-width:22px; min-height:22px; display:flex; align-items:center; justify-content:center; }
.hist-del:hover { color:var(--rose); background:rgba(255,107,138,.1); }


.detail-overlay { position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(8px); z-index:200; display:none; align-items:flex-start; justify-content:flex-end; }
.detail-overlay.show { display:flex; }
.detail-panel { background:var(--bg2); border-left:1px solid var(--border2); width:min(500px,100vw); height:100vh; display:flex; flex-direction:column; box-shadow:-24px 0 80px rgba(0,0,0,.55); animation:slideIn .22s ease; transition:var(--transition-theme); }
.detail-head { padding:14px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.detail-head-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.detail-title-text { font-family:'DM Serif Display',serif; font-size:.92rem; line-height:1.45; color:var(--text); flex:1; }
.detail-meta { display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:.65rem; color:var(--t3); }
.detail-meta span { display:flex; align-items:center; gap:3px; }

/* tabs */
.dtabs { display:flex; gap:3px; padding:10px 14px 0; border-bottom:1px solid var(--border); flex-shrink:0; }
.dtab-btn { font-size:.68rem; padding:8px 16px; border-radius:7px 7px 0 0; border:1px solid transparent; border-bottom:none; background:transparent; color:var(--t3); cursor:pointer; transition:all .15s; font-family:'DM Sans',sans-serif; font-weight:500; min-height:36px; }
.dtab-btn:hover { color:var(--text); background:var(--bg3); }
.dtab-btn.on { background:var(--bg3); color:var(--gold); border-color:var(--border); font-weight:600; }
.dtab-body { flex:1; overflow-y:auto; padding:12px 14px; }
.dtab-pane { display:none; }
.dtab-pane.on { display:block; }

/* detail cards */
.dcard { background:var(--bg3); border:1px solid var(--border); border-radius:9px; padding:13px 14px; margin-bottom:8px; transition:var(--transition-theme); }
.dcard:hover { border-color:var(--border2); }
.dcard-badges { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; }
.dcard-title { font-family:'DM Serif Display',serif; font-size:.88rem; line-height:1.45; color:var(--text); cursor:pointer; margin-bottom:5px; font-weight:400; }
.dcard-title:hover { color:var(--gold); }
.dcard-auth { font-size:.7rem; color:var(--t2); margin-bottom:3px; }
.dcard-jrnl { font-size:.65rem; color:var(--sky); margin-bottom:7px; }
.dcard-foot { display:flex; justify-content:space-between; align-items:center; padding-top:8px; border-top:1px solid var(--border); }
.dcard-cite { font-size:.62rem; color:var(--t3); }
.detail-loading { text-align:center; padding:48px 0; }
.detail-loading p { font-size:.68rem; color:var(--t3); letter-spacing:1.5px; margin-top:8px; }
.detail-empty { text-align:center; padding:48px 16px; font-size:.78rem; color:var(--t3); }
.detail-total { font-size:.65rem; color:var(--t3); margin-bottom:10px; padding:7px 10px; background:var(--bg3); border-radius:6px; border:1px solid var(--border); }
.detail-total strong { color:var(--gold); }



/* ═══════════════════════════════════════════════════
   IN-CARD EXPANDABLE: RELATED + CITED BY
═══════════════════════════════════════════════════ */
.card-expand-row {
  display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.btn-expand {
  font-size:.61rem; padding:5px 11px; border-radius:6px;
  border:1px solid; cursor:pointer; display:inline-flex;
  align-items:center; gap:4px; transition:all .15s;
  white-space:nowrap; font-weight:500; min-height:30px;
  font-family:'DM Sans',sans-serif; background:transparent;
}
.btn-expand-related { color:var(--sky); border-color:rgba(91,200,245,.3); }
.btn-expand-related:hover,.btn-expand-related.open { background:rgba(91,200,245,.1); border-color:rgba(91,200,245,.6); }
.btn-expand-cited { color:var(--violet); border-color:rgba(180,142,255,.3); }
.btn-expand-cited:hover,.btn-expand-cited.open { background:rgba(180,142,255,.1); border-color:rgba(180,142,255,.6); }

.card-section {
  margin-top:12px; border-top:1px solid var(--border);
  padding-top:12px; display:none;
}
.card-section.open { display:block; }
.cs-head {
  font-size:.6rem; color:var(--t3); letter-spacing:1.2px;
  text-transform:uppercase; font-weight:600; margin-bottom:10px;
  display:flex; justify-content:space-between; align-items:center;
}
.cs-head strong { color:var(--gold); }
.cs-loading { text-align:center; padding:20px 0; font-size:.65rem; color:var(--t3); letter-spacing:1.5px; display:flex; align-items:center; justify-content:center; gap:8px; }
.cs-loading .mini-spin { width:16px; height:16px; border:2px solid var(--border2); border-top-color:var(--gold); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }
.cs-empty { text-align:center; padding:16px; font-size:.75rem; color:var(--t3); }
.cs-total { font-size:.6rem; color:var(--t3); margin-bottom:8px; }
.cs-total strong { color:var(--gold); }

.mini-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:8px; padding:11px 12px; margin-bottom:7px;
  transition:border-color .15s;
}
.mini-card:last-child { margin-bottom:0; }
.mini-card:hover { border-color:var(--border2); }
.mini-card-title {
  font-family:'DM Serif Display',serif; font-size:.85rem;
  line-height:1.45; color:var(--text); cursor:pointer;
  margin-bottom:5px; font-weight:400;
}
.mini-card-title:hover { color:var(--gold); }
.mini-card-meta { font-size:.62rem; color:var(--t3); margin-bottom:6px; line-height:1.6; }
.mini-card-acts { display:flex; gap:5px; flex-wrap:wrap; }