:root {

  --navy: var(--ink);

  --navy-solid: #0C2135;
  --navy-soft: #16324F;
  --gold: var(--accent);
  --gold-lt: var(--accent-soft);
  --gold-dk: var(--accent);
  --sl-bg: var(--bg);
  --sf: var(--bg-elevated);
  --txt: var(--ink);
  --muted: var(--ink-soft);
  --border: var(--line);
  --green: var(--success);
  --green-lt: color-mix(in srgb, var(--success) 15%, transparent);
  --teal: #0A6E71;
  --teal-lt: color-mix(in srgb, var(--teal) 15%, transparent);
  --orange: #C4560B;
  --orange-lt: #FEF0E5;
  --red: var(--danger);
  --red-lt: color-mix(in srgb, var(--danger) 15%, transparent);
  --blue: var(--accent);
  --blue-lt: var(--accent-soft);
  --purple: #6020A0;
  --purple-lt: #F0E6FD;
  --r: 10px;
  --sh: var(--shadow-card);
  --sh-lg: var(--shadow-card-hover);
}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --teal:#3FD0BF; }
}
:root[data-theme="dark"]{ --teal:#3FD0BF; }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-size:14px}
body{font-family:'Inter',sans-serif;background:var(--sl-bg);color:var(--txt);line-height:1.6}
h1,h2,h3,h4,h5{font-family:'Space Grotesk',sans-serif}
.mono{font-family:'IBM Plex Mono',monospace}
button{cursor:pointer;font-family:inherit;font-size:inherit}

#main a,#article-panel a{color:var(--blue);text-decoration:none}
#main a:hover,#article-panel a:hover{text-decoration:underline}

#upload-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--navy-solid);
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:24px 24px;
}
.upload-card{
  background:var(--sf);border-radius:18px;padding:var(--card-padding-lg);max-width:540px;width:100%;
  box-shadow:var(--sh-lg);text-align:center;
}
.upload-logo{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
}
.upload-logo .apps-brand-name{ font-size:20px; }
.loading-logo svg, .upload-logo svg{ display:block; flex-shrink:0; width:22px; height:22px; }
.upload-card h2{font-size:22px;color:var(--navy);margin-bottom:8px}
.upload-card p{color:var(--muted);font-size:13.5px;margin-bottom:28px;line-height:1.65}

.drop-zone{
  border:2px dashed var(--border);border-radius:var(--r);padding:40px 24px;
  cursor:pointer;transition:all .2s;position:relative;overflow:hidden;
}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--gold);background:var(--gold-lt)}
.drop-zone-icon{font-size:36px;margin-bottom:10px;display:block}
.drop-zone-label{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:var(--navy)}
.drop-zone-sub{color:var(--muted);font-size:12.5px;margin-top:4px}
.drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}

.upload-features{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px;text-align:left}
.uf{background:var(--sl-bg);border-radius:8px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.uf-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.uf-text{font-size:12.5px;color:var(--muted);line-height:1.5}
.uf-text strong{display:block;color:var(--txt);font-size:13px;font-family:'Space Grotesk',sans-serif}

#app{display:none;height:100vh;flex-direction:row}
#app.visible{display:flex}

#main{
  position:fixed; top:48px; left:0; right:0;
  overflow-y:auto; display:flex; flex-direction:column;
}
.page{display:none;flex-direction:column;min-height:100%}
.page.active{display:flex}

.page-body{padding:24px 28px;flex:1}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.stat-card{
  background:var(--sf);border-radius:var(--r);padding:var(--card-padding-md);
  box-shadow:var(--sh);border-left:3px solid transparent;
}
.stat-card.gold{border-left-color:var(--gold)}
.stat-card.green{border-left-color:var(--green)}
.stat-card.blue{border-left-color:var(--blue)}
.stat-card.teal{border-left-color:var(--teal)}
.stat-num{
  font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;
  color:var(--navy);line-height:1;margin-bottom:4px;
}
.stat-label{color:var(--muted);font-size:12.5px}
.stat-icon{font-size:22px;float:right;opacity:.3}

.article-row:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
mark{background:var(--gold-lt);color:var(--gold-dk);padding:0 2px;border-radius:3px;font-weight:600}
.tag{
  font-size:10.5px;padding:2px 8px;border-radius:20px;font-weight:500;
  display:inline-flex;align-items:center;gap:4px;
}
.tag-kw{background:var(--blue-lt);color:var(--blue)}
.tag-green{background:var(--green-lt);color:var(--green)}

.browser-layout{display:flex;gap:0;flex:1;overflow:hidden;height:calc(100vh - 60px)}
.filter-col{
  width:240px;flex-shrink:0;border-right:1px solid var(--border);
  padding:18px;overflow-y:auto;background:var(--sf);
}
.filter-col h4{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;margin-top:16px}
.filter-col h4:first-child{margin-top:0}
.filter-check{display:flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer;font-size:13px}
.filter-check input{cursor:pointer;accent-color:var(--gold)}
.filter-check .fc-count{margin-left:auto;color:var(--muted);font-size:11px}
.year-range{display:flex;gap:6px;align-items:center}
.year-range input{
  width:70px;padding:5px 8px;border:1px solid var(--border);border-radius:6px;
  font-family:inherit;font-size:13px;color:var(--txt);background:var(--sl-bg);
}
.year-range input:focus{outline:none;border-color:var(--gold)}

.results-col{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.search-bar{padding:14px 18px;border-bottom:1px solid var(--border);background:var(--sf);position:sticky;top:0;z-index:10}
.search-wrap{position:relative}
.search-wrap input{
  width:100%;padding:9px 14px 9px 38px;border:1.5px solid var(--border);border-radius:8px;
  font-family:inherit;font-size:14px;background:var(--sl-bg);color:var(--txt);
  transition:border-color .15s;
}
.search-wrap input:focus{outline:none;border-color:var(--gold);background:#fff}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px}
.results-info{font-size:12px;color:var(--muted)}
.results-toolbar{
  padding:10px 18px;border-bottom:1px solid var(--border);background:var(--sf);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.results-export{display:flex;gap:6px;flex-wrap:wrap}
.results-list{flex:1;overflow-y:auto}

.chart-card{
  background:var(--sf);border:1px solid var(--border);border-radius:12px;
  padding:var(--card-padding-md);margin-bottom:16px;
}
.chart-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px;flex-wrap:wrap}
.chart-card-title{font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:700;color:var(--navy)}
.chart-card-sub{font-size:12px;color:var(--muted)}
.chart-wrap{position:relative;width:100%;margin-top:14px}
.bubble-scale{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;color:var(--muted)}
.bubble-scale-bar{
  flex:1;max-width:220px;height:8px;border-radius:20px;
  background:linear-gradient(90deg,#14663e,#e8a21a,#b52a1e);
}
.bubble-hint{font-size:11.5px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:6px}

.article-row{
  padding:14px 18px;border-bottom:1px solid var(--border);cursor:pointer;
  transition:background .12s;display:flex;gap:14px;align-items:flex-start;
}
.article-row:hover{background:var(--sl-bg)}
.article-row.selected{background:var(--gold-lt);border-left:3px solid var(--gold)}
.ar-num{
  flex-shrink:0;width:28px;height:28px;background:var(--sl-bg);border-radius:6px;
  font-size:11px;font-weight:700;color:var(--muted);display:flex;align-items:center;
  justify-content:center;margin-top:1px;
}
.ar-body{flex:1;min-width:0}
.ar-title{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.4;margin-bottom:4px}
.ar-meta{font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ar-meta span{display:flex;align-items:center;gap:4px}
.ar-doi{font-size:11px;color:var(--muted);margin-top:4px;font-family:'IBM Plex Mono',monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.pagination{padding:14px 18px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--border);background:var(--sf)}
.pg-btn{
  padding:6px 14px;border:1.5px solid var(--border);border-radius:7px;
  background:var(--sf);color:var(--txt);font-size:13px;transition:all .15s;
}
.pg-btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.pg-btn:disabled{opacity:.4;cursor:default}
.pg-btn.active{background:var(--navy-solid);border-color:var(--navy-solid);color:#fff}
.pg-info{font-size:12px;color:var(--muted);margin-left:auto}

#article-panel{
  position:fixed;right:0;top:0;height:100vh;width:480px;
  background:var(--sf);box-shadow:-4px 0 32px rgba(12,33,53,.15);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  z-index:200;display:flex;flex-direction:column;overflow:hidden;
}
#article-panel.open{transform:translateX(0)}
.panel-header{
  padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;background:var(--navy-solid);color:#fff;
}
.panel-journal{font-size:11.5px;color:rgba(255,255,255,.6);flex:1;line-height:1.4}
.panel-close{
  background:rgba(255,255,255,.1);border:none;color:#fff;width:30px;height:30px;
  border-radius:7px;font-size:16px;display:flex;align-items:center;justify-content:center;
  transition:background .15s;flex-shrink:0;
}
.panel-close:hover{background:rgba(255,255,255,.2)}
.panel-body{flex:1;overflow-y:auto;padding:22px 22px}
.panel-title{font-size:17px;font-weight:700;color:var(--navy);line-height:1.4;margin-bottom:12px}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.meta-pill{
  display:flex;align-items:center;gap:5px;font-size:12px;
  padding:4px 10px;border-radius:20px;background:var(--sl-bg);color:var(--txt);
}
.meta-pill svg{flex-shrink:0}
.section-heading{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin:18px 0 7px;
}
.abstract-text{
  font-size:13px;line-height:1.7;color:var(--txt);background:var(--sl-bg);
  border-radius:8px;padding:14px;
}
.kw-list{display:flex;flex-wrap:wrap;gap:6px}
.kw-tag{
  font-size:12px;padding:3px 10px;border-radius:20px;
  background:var(--navy-solid);color:rgba(255,255,255,.85);
}
.citation-tabs{display:flex;gap:4px;margin-bottom:8px}
.cit-tab{
  padding:5px 12px;border-radius:7px;border:1.5px solid var(--border);
  font-size:12px;background:var(--sf);color:var(--muted);transition:all .15s;
}
.cit-tab.active{background:var(--navy-solid);border-color:var(--navy-solid);color:#fff}
.citation-box{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;line-height:1.7;
  background:var(--sl-bg);border-radius:8px;padding:12px 14px;
  border:1px solid var(--border);position:relative;white-space:pre-wrap;word-break:break-word;
}
.copy-btn{
  position:absolute;top:8px;right:8px;padding:3px 8px;
  background:var(--sf);border:1.5px solid var(--border);border-radius:5px;
  font-size:11px;color:var(--muted);transition:all .15s;
}
.copy-btn:hover{border-color:var(--gold);color:var(--gold)}
.export-hint{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.5}
.refs-list{font-size:12px;line-height:1.6;color:var(--muted)}
.refs-list li{margin-bottom:8px;padding-left:14px;position:relative}
.refs-list li::before{content:'·';position:absolute;left:2px}

.related-list{display:flex;flex-direction:column;gap:8px}
.related-item{
  padding:10px 12px;background:var(--sl-bg);border-radius:8px;cursor:pointer;
  border:1px solid transparent;transition:all .15s;
}
.related-item:hover{border-color:var(--gold);background:var(--gold-lt)}
.related-item:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.related-item-title{font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.4;margin-bottom:5px}
.related-item-meta{font-size:11px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.related-item-meta span{display:flex;align-items:center;gap:4px}
.related-score{
  font-size:10px;padding:1px 7px;border-radius:20px;background:var(--teal-lt);color:var(--teal);font-weight:600;
}
.related-empty{font-size:12px;color:var(--muted);padding:2px 0 4px}

.bookmark-btn{
  flex-shrink:0;width:30px;height:30px;border-radius:7px;border:1.5px solid var(--border);
  background:var(--sf);color:var(--muted);font-size:15px;display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.bookmark-btn:hover{border-color:var(--gold);color:var(--gold-dk)}
.bookmark-btn.active{background:var(--gold-lt);border-color:var(--gold);color:var(--gold-dk)}
.lib-item{
  background:var(--sf);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;margin-bottom:10px;
}
.lib-item-main{cursor:pointer}
.lib-item-main:hover .ar-title{color:var(--gold-dk)}
.lib-note{
  width:100%;margin-top:10px;padding:8px 10px;border:1px solid var(--border);border-radius:7px;
  font-family:inherit;font-size:12.5px;color:var(--txt);background:var(--sl-bg);resize:vertical;min-height:38px;
}
.lib-note:focus{outline:none;border-color:var(--gold)}
.lib-item-actions{display:flex;justify-content:flex-end;margin-top:8px}
.panel-actions{
  padding:16px 22px;border-top:1px solid var(--border);
  display:flex;gap:8px;flex-wrap:wrap;background:var(--sl-bg);
}

.sl-btn{
  padding:8px 16px;border-radius:7px;border:none;font-size:13px;
  font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:all .15s;
}
.sl-btn-primary{background:var(--navy-solid);color:#fff}
.sl-btn-primary:hover{background:var(--navy-soft)}
.sl-btn-secondary{background:var(--sf);border:1.5px solid var(--border);color:var(--txt)}
.sl-btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.sl-btn-sm{padding:6px 12px;font-size:12px}

.section-tabs{
  display:flex;gap:28px;border-bottom:1.5px solid var(--border);margin-bottom:20px;
}
.section-tab{
  background:none;border:none;cursor:pointer;padding:0 0 12px;
  font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:600;
  color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1.5px;
  transition:color .15s,border-color .15s;
}
.section-tab:hover{color:var(--navy)}
.section-tab.active{color:var(--navy);border-bottom-color:var(--gold)}
.gapmap-tab-panel{display:none}
.gapmap-tab-panel.active{display:block}

.library-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}

.gap-controls{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.gap-tab{
  padding:7px 16px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--sf);color:var(--muted);font-size:13px;font-weight:500;
  transition:all .15s;
}
.gap-tab.active{background:var(--navy-solid);border-color:var(--navy-solid);color:#fff}
.gap-legend{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.legend-dot{width:10px;height:10px;border-radius:50%}

.gap-table{width:100%;background:var(--sf);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);border-collapse:separate;border-spacing:0}
.gap-table th{
  background:var(--navy-solid);color:rgba(255,255,255,.75);padding:10px 14px;
  text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.gap-table td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.gap-table tr:last-child td{border-bottom:none}
.gap-table tr:hover td{background:var(--sl-bg)}
.gap-bar{
  height:6px;border-radius:3px;background:var(--border);overflow:hidden;
  min-width:60px;margin-top:3px;
}
.gap-bar-fill{height:100%;border-radius:3px;transition:width .5s ease}
.status-badge{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:20px;white-space:nowrap;
}

#overlay{position:fixed;inset:0;background:rgba(12,33,53,.4);z-index:150;display:none}
#overlay.visible{display:block}

#loading{
  position:fixed;inset:0;background:var(--navy-solid);z-index:999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;
}
#loading.hidden{display:none}
#upload-screen{display:none!important}

#load-error{
  position:fixed;inset:0;background:var(--navy-solid);z-index:999;
  display:none;align-items:center;justify-content:center;padding:24px;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:24px 24px;
}
#load-error.visible{display:flex}
#load-error .upload-card p{white-space:pre-line}

.loading-logo{
  display:flex;align-items:center;gap:8px;
}

.loading-logo .apps-brand-name, .loading-logo .apps-brand-name-bold{ color:#fff; }
.loading-logo .apps-brand-name{ font-size:24px; }
.loading-bar-wrap{width:280px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.loading-bar{height:100%;background:var(--gold);border-radius:2px;width:0;transition:width .3s}
.loading-text{color:rgba(255,255,255,.5);font-size:13px}

@media(max-width:900px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  #article-panel{width:100%}
  .browser-layout{flex-direction:column; height:auto; flex:1; min-height:0}
  .filter-col{width:100%;max-height:38vh;border-right:none;border-bottom:1px solid var(--border)}
}
@media(max-width:600px){
  .stats-grid{grid-template-columns:1fr}
  .page-body{padding:16px}
}

.dash-header{ position:fixed; top:0; left:0; right:0; z-index:500; }

.dash-header, .dash-header *,
.dash-sidebar, .dash-sidebar *{
  font-family: var(--font-body);
}

#article-panel{ top:48px; height:calc(100vh - 48px); }

@media(min-width:821px){
  #sidebar{ position:fixed; left:0; top:48px; height:calc(100vh - 48px); z-index:100; }
  #main{ left:var(--dash-sidebar-w); height:calc(100vh - 48px); }
}
@media(max-width:820px){
  #main{
    height:calc(100vh - 48px - var(--dash-bottomnav-h) - env(safe-area-inset-bottom, 0px));
  }
}