:root{
  --accent:#e1c04a;
  --bg:#ffffff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --ring:#e2e8f0;
  --chip:#eef2ff;
  --shadow:0 2px 16px rgba(15,23,42,.05);
  --badge-bg:#f8fafc;
  --badge-border:#e2e8f0;
  --score-bg:var(--bg);
  --score-border:#e5e7eb;
  --link:#0b1220;
}
/* Dark theme */
[data-theme="dark"]{
  --bg:#0b1220;
  --card:#101827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --ring:#223049;
  --chip:#1e293b;
  --shadow:0 2px 16px rgba(0,0,0,.35);
  --badge-bg:#0f172a;
  --badge-border:#223049;
  --score-bg:var(--bg);
  --score-border:#223049;
  --link:#f8fafc;
}

*{box-sizing:border-box}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial;
  background:var(--bg); color:var(--text);
}
.wrap{max-width:1100px; margin:40px auto; padding:0 16px}

/* Header row */
.header-row{
  display:flex; align-items:center; gap:14px; justify-content:space-between;
}
.theme-btn{
  border:none; background:transparent; padding:6px; line-height:1; cursor:pointer;
  color:var(--text); opacity:.85; display:inline-flex; align-items:center; justify-content:center;
}
.theme-btn:hover{ opacity:1; }
.theme-btn svg{ display:block }

/* Card & headings */
.card{
  background:var(--card); border:1px solid var(--ring); border-radius:16px; padding:28px;
  box-shadow:var(--shadow);
}
h1{margin:0 0 6px; font-size:36px; font-weight:700; line-height:1.15; letter-spacing:-.01em}
.sub{color:var(--muted); margin:8px 0 22px; font-size:18px; font-weight:400}

/* Search bar */
.searchbar{display:flex; gap:10px; align-items:center}
.searchbar input{
  flex:1; height:54px; border:1px solid var(--ring); border-radius:12px; padding:0 18px; font-size:17px; font-weight:400;
  outline: none; transition: box-shadow .15s, border-color .15s; background:var(--card); color:var(--text);
}
.searchbar input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(225,192,74,.22) }
.btn{
  height:54px; padding:0 22px; border-radius:12px; border:0; cursor:pointer; font-weight:600; font-size:17px;
  color:#ffffff; background:var(--accent); transition: transform .05s ease-in-out, box-shadow .15s;
  box-shadow:0 2px 0 rgba(0,0,0,.05);
}
[data-theme="dark"] .btn{ color:#ffffff }

/* Controls */
.controls{display:flex; gap:12px; align-items:center; margin-top:14px}
.select{
  border:1px solid var(--ring); background:var(--card); color:var(--text);
  border-radius:10px; padding:8px 12px; height:42px; font-weight:600;
}
.filter{border:1px solid var(--ring); padding:8px 12px; border-radius:10px; background:var(--card); color:var(--text); cursor:pointer}
.filter:hover{border-color:var(--accent)}

/* Recent */
.recent{display:flex; align-items:center; gap:16px; color:var(--muted); margin-top:14px}
.recent .title{display:flex; align-items:center; gap:8px; font-weight:400}
.chip{
  display:inline-flex; align-items:center; gap:8px; background:#eff4fb; color:#0f172a; padding:9px 14px;
  border-radius:999px; font-weight:500; border:1px solid var(--ring); cursor:pointer;
  margin:6px 10px 0 0;
}
[data-theme="dark"] .chip{ background:#0f172a; color:#e5e7eb }
.chip:hover{ border-color:var(--accent) }
.chip .x{opacity:.6}
.link-btn{background:none; border:0; color:var(--text); font-weight:500; cursor:pointer}

/* Results & filters */
.results{margin-top:26px}
.panel{display:none; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.panel.active{display:flex}
.tag{background:var(--chip); color:#3730a3; border:1px solid #dbeafe}
[data-theme="dark"] .tag{ color:#c7d2fe; border-color:#334155 }
.author{background:#f1f5f9; color:#0f172a}
[data-theme="dark"] .author{ background:#111827; color:#e5e7eb }

/* List */
.list{display:grid; gap:16px}
.item{
  background:var(--card); border:1px solid var(--ring); border-radius:16px; padding:18px 18px;
  transition:border-color .15s, box-shadow .15s;
}
.item:hover{border-color:#d7dbe3; box-shadow:0 6px 22px rgba(2,6,23,.05)}
[data-theme="dark"] .item:hover{ box-shadow:0 6px 22px rgba(0,0,0,.35) }
.item-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.title{
  font-weight:700; font-size:21px; margin:0 0 10px; color:var(--accent); text-decoration:none;
}
.title:hover{ text-decoration:underline; text-underline-offset:3px }
.excerpt{color:#334155; line-height:1.55; margin:0 0 14px; font-weight:400}
[data-theme="dark"] .excerpt{ color:#cbd5e1 }
.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{
  font-size:12px; padding:6px 10px; border-radius:999px; background:var(--badge-bg); border:1px solid var(--badge-border);
}
.tag-link{ text-decoration:none; color:inherit; }
.tag-link:hover{ border-color:var(--accent); }

.score{
  margin-left:auto; font-weight:600; background:var(--score-bg); border:1px solid var(--score-border);
  color:#6b4f00; padding:6px 10px; border-radius:999px
}
[data-theme="dark"] .score{ color:#d8b200 }

/* States & footer */
.empty, .error, .loading{
  border:1px dashed var(--ring); background:var(--card); border-radius:12px; padding:24px; color:var(--muted); text-align:center;
  font-weight:400;
}
footer{margin:28px 0 10px; color:var(--muted); font-size:12px; font-weight:400}
footer a{ color:inherit; text-decoration:underline; text-underline-offset:2px }
footer a:hover{ color:var(--accent) }