:root{
  --bg:#0b0e12;
  --panel:#12171f;
  --card:#161c25;
  --fg:#e6ebf2;
  --muted:#9fb0c5;
  --accent:#6ab0ff;
  --ok:#57d39b;
  --warn:#ffb86b;
  --danger:#ff6b6b;
  --hair:#223044;
  --shadow: 0 10px 30px rgba(0,0,0,.25);

  /* journal colors - dark */
  --c-prl:#1f2937; --t-prl:#f9fafb;
  --c-prb:#111827; --t-prb:#bfdbfe;
  --c-prx:#261b26; --t-prx:#ffd6ff;
  --c-prr:#102a43; --t-prr:#e2efff;
  --c-nphys:#1f1a13; --t-nphys:#ffe3ba;
  --c-nc:#0f172a; --t-nc:#c7d2fe;
  --c-science:#0b1220; --t-science:#c7d2fe;
  --c-nature:#0f1f14; --t-nature:#bfe3c6;
  --c-chem:#20162a; --t-chem:#f7bfff;
  --c-arxiv:#181818; --t-arxiv:#d0d0d0;
  --c-else:#1c2430; --t-else:#cbd5e1;

  --title-color: inherit;
}

/* Light theme */
.theme-light{
  --bg:#f6f7f3;
  --panel:#ffffff;
  --card:#ffffff;
  --fg:#111827;
  --muted:#374151;
  --accent:#2b6cb0;
  --ok:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;
  --hair:#e5e7eb;
  --shadow: 0 10px 30px rgba(0,0,0,.08);

  /* journal colors - warm soft */
  --c-prl:#e6f0ff; --t-prl:#0f172a;
  --c-prb:#eaf3ff; --t-prb:#0f172a;
  --c-prx:#f4e8ff; --t-prx:#0f172a;
  --c-prr:#e8f7ff; --t-prr:#0f172a;
  --c-nphys:#fff5e6; --t-nphys:#0f172a;
  --c-nc:#eef7ff; --t-nc:#0f172a;
  --c-science:#eaf4ff; --t-science:#0f172a;
  --c-nature:#e9f7ee; --t-nature:#0f172a;
  --c-chem:#f7eaff; --t-chem:#0f172a;
  --c-arxiv:#f2f2f2; --t-arxiv:#0f172a;
  --c-else:#f1f5f9; --t-else:#0f172a;

  --title-color:#2563eb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans CJK", "PingFang SC", "Microsoft Yahei", sans-serif;
}

.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px;
  background:rgba(10,14,18,.08); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--hair);
}

.brand{display:flex; align-items:center; gap:10px;}
.logo{font-weight:800; letter-spacing:.5px}
.muted{color:var(--muted); font-size:12px}

.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.btn{
  background:var(--panel); border:1px solid var(--hair); color:var(--fg);
  padding:8px 10px; border-radius:10px; cursor:pointer;
  box-shadow:var(--shadow);
}
.btn:hover{border-color:#344761}
.btn.solid{background:var(--accent); color:#fff; border-color:transparent; font-weight:700}
.btn.ghost{background:transparent}
.btn.mini{padding:6px 8px; font-size:12px}

#q{min-width:240px; background:#0d141d10; color:var(--fg); border:1px solid var(--hair); border-radius:10px; padding:8px 10px}
#sort{background:#0d141d10; color:var(--fg); border:1px solid var(--hair); border-radius:10px; padding:8px 10px}

#app{display:grid; grid-template-columns: 320px 1fr; gap:16px; padding:16px}
.sidebar{
  background:var(--panel); border:1px solid var(--hair); border-radius:14px;
  padding:8px; position:sticky; top:72px; height: calc(100vh - 88px);
  overflow:auto;
}
.cat-toolbar{padding:4px 6px; display:flex; justify-content:flex-end}

.content{min-height:80vh}
.hint{padding:12px 14px; color:var(--muted)}

.cat-item{
  border:1px dashed #2b3b5240; border-radius:14px; padding:10px; margin:14px 6px;
  background: transparent;
}
.cat-head{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.8em;}
.cat-head .dot{width:12px; height:12px; border-radius:50%; background:var(--accent)}
.cat-name{outline:none; padding:2px 6px; border-radius:6px}
.cat-name:focus{background:#0b131e10; border:1px solid var(--hair)}
.cat-actions{display:flex; gap:6px; margin-top:6px}
.mini{font-size:12px; padding:4px 8px; background:#0c141e10; border:1px solid var(--hair); color:var(--fg); border-radius:8px; cursor:pointer}
.mini:hover{border-color:#2c3d56}
.dropzone{
  min-height:60px; margin-top:10px; border:2px dashed #30445f80; border-radius:10px; padding:8px;
  transition: 0.18s transform ease, 0.18s background-color ease, 0.18s border-color ease;
}
.dropzone.over{ background:rgba(106,176,255,.22); border-color:var(--accent); transform: scale(1.02); animation: zonePulse 0.9s ease-in-out infinite; }
.dropzone.accept{ animation: acceptFlash .6s ease-out 1; }
@keyframes zonePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(106,176,255,.45) } 50% { box-shadow: 0 0 0 10px rgba(106,176,255,.06) } }
@keyframes acceptFlash { 0%{background:rgba(88,214,141,.3)} 100%{background:transparent} }

.board{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.board .col{ background:var(--panel); border:1px solid var(--hair); border-radius:16px; padding:10px; }
.col-head{display:flex; align-items:center; gap:8px; font-weight:800; margin-bottom:8px}
.col-head .dot{width:12px; height:12px; border-radius:50%; background:var(--ok)}

.cards{ display:grid; grid-template-columns: repeat(1, 1fr); gap:12px; }
@media(min-width:900px){ .cards{grid-template-columns: repeat(2, 1fr)} }
@media(min-width:1200px){ .cards{grid-template-columns: repeat(3, 1fr)} }

.card{
  background:var(--card); border:1px solid var(--hair); border-radius:16px; padding:14px;
  box-shadow:var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.card.dragging{ opacity:.6; transform: rotate(-2deg) scale(0.97); box-shadow: 0 20px 40px rgba(0,0,0,.35); }

.badges{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.badge{ display:inline-flex; align-items:center; padding:2px 8px; font-size:12px;
  border-radius:999px; border:1px solid #2b3a50; color:#cbd5e1; background:#0d141c; }
.theme-light .badge{ color:#0f172a; background:#e6eef8; border-color:#c9d6e8 }

.badge.journal{border-color:transparent}
.badge.type{background:#0e1822}
.theme-light .badge.type{ background:#dfeaf6; }
.badge.category{background:#13202e; color:#9fd0ff}
.theme-light .badge.category{ background:#dbeafe; color:#0f172a }
.badge.note-indicator{background:#064e3b; color:#a7f3d0; border-color:#065f46}
.theme-light .badge.note-indicator{ background:#c1f1d6; color:#065f46; border-color:#93e2b7 }

.title{margin:6px 0 4px; font-size:16px; color:var(--title-color);}
.meta{color:var(--muted); font-size:12px} .meta .sep{opacity:.6; padding:0 6px}
.abstract{color:inherit; opacity:.88; font-size:13px; margin:8px 0 10px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.links{display:flex; gap:8px; flex-wrap:wrap}
.lnk{font-weight:700; text-decoration:none; background:#0e162020; border:1px solid #24344940; color:inherit; padding:6px 10px; border-radius:10px}
.lnk.primary{background:var(--accent); color:#fff; border-color:transparent}
.lnk:hover{opacity:.9}
.note-block{margin-top:8px}
.note{width:100%; min-height:72px; resize:vertical; padding:10px; background:#0e162020; color:inherit; border:1px solid var(--hair); border-radius:10px; outline:none}
.note:focus{border-color:var(--accent)}

/* Rating stars */
.rating{position:relative; width:110px; height:18px; margin:6px 0 4px; user-select:none; cursor:pointer}
.stars{position:absolute; top:0; left:0; width:110px; height:18px; letter-spacing:2px; font-weight:800; font-size:16px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans CJK";}
.stars-bg{color:#47556940}
.stars-fg{color:#fbbf24; overflow:hidden; width:0}
/*.stars-text{position:absolute; right:-42px; top:0; font-size:12px; color:var(--muted)}*/

/* tone backgrounds (per journal) */
.card.tone-PRL{ background: var(--c-prl); color: var(--t-prl); }
.card.tone-PRB{ background: var(--c-prb); color: var(--t-prb); }
.card.tone-PRX{ background: var(--c-prx); color: var(--t-prx); }
.card.tone-PRR{ background: var(--c-prr); color: var(--t-prr); }
.card.tone-NP,.card.tone-NatPhys{ background: var(--c-nphys); color: var(--t-nphys); }
.card.tone-NC{ background: var(--c-nc); color: var(--t-nc); }
.card.tone-Science{ background: var(--c-science); color: var(--t-science); }
.card.tone-Nature{ background: var(--c-nature); color: var(--t-nature); }
.card.tone-Chem{ background: var(--c-chem); color: var(--t-chem); }
.card.tone-arXiv{ background: var(--c-arxiv); color: var(--t-arxiv); }
.card.tone-Else{ background: var(--c-else); color: var(--t-else); }

/* journal badges */
.badge.j-PRL{background:var(--c-prl); color:var(--t-prl)}
.badge.j-PRB{background:var(--c-prb); color:var(--t-prb)}
.badge.j-PRX{background:var(--c-prx); color:var(--t-prx)}
.badge.j-PRR{background:var(--c-prr); color:var(--t-prr)}
.badge.j-NP,.badge.j-NatPhys{background:var(--c-nphys); color:var(--t-nphys)}
.badge.j-NC{background:var(--c-nc); color:var(--t-nc)}
.badge.j-Science{background:var(--c-science); color:var(--t-science)}
.badge.j-Nature{background:var(--c-nature); color:var(--t-nature)}
.badge.j-Chem{background:var(--c-chem); color:var(--t-chem)}
.badge.j-arXiv{background:var(--c-arxiv); color:var(--t-arxiv)}
.badge.j-Else{background:var(--c-else); color:var(--t-else)}

/* ===== Enhancements for board page & compact tiles ===== */
.topline{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 6px}
.topline .date{font-weight:800}

.board-page #app{grid-template-columns: 1fr}
.board-page .sidebar{display:none}
.board-page .content{padding: 6px 2px 8px}
.board-page #hint, .board-page #cards{display:none}
.board-page #board{display:grid !important}

.board-page .board{
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap:14px;
  height: calc(100vh - 120px);
}
.board-page .board .col:nth-child(n+7){ display:none }

.board-page .board .col{
  display:flex; flex-direction:column;
  min-height: 0;
}
.board-page .board .col .dropzone{
  flex:1 1 auto;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:8px;
  overflow:auto;
  padding:8px;
  border-radius:12px;
  border:1px dashed #30445f50;
}

.board .card{
  position:relative;
  width:auto;
  min-height:110px;
  padding:10px 10px 12px;
  border-radius:12px;
}
.board .card .badges,
.board .card .meta,
.board .card .abstract,
.board .card .links,
.board .card .note-block{ display:none !important; }
.board .card .topline .date{ display:none !important; }
.board .card .topline{ position:absolute; top:6px; right:8px; width:auto }
.board .card .rating{
        position: relative;
	left:-10px;
	top: 1px;	
	margin: 0; 
}

.board .card .title{ margin-top:8px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

#preview-panel{
  position:fixed; z-index:9999; pointer-events:none;
  max-width:520px;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.35));
  transform-origin: top left;
}
#preview-panel .card{
  width:520px; max-width:520px;
  padding:16px;
}
#preview-panel .card .badges,
#preview-panel .card .meta,
#preview-panel .card .abstract,
#preview-panel .card .links,
#preview-panel .card .note-block,
#preview-panel .card .topline .date{ display:initial !important; }
#preview-panel .card .topline{ position:static }

.card { position: relative;}
/*.cards .card .date{ font-weight:800 }*/
.cards .card .rating{
	position: absolute;
	top: 10px;
	right: 12px;
	margin: 0;
}
.cards .card time.date{
	position: absolute;
	top 10px;
	right: 32px;
	font-weight: 800
}