pastel palette, hue-matched rings

review.html

@@ -5,8 +5,14 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>annotation review</title>
 <style>
-:root, [data-theme="light"] { --bg: #f6f8fa; --card: #ffffff; --fg: #1f2328; --mut: #59636e; --line: #d0d7de; --keep: #1a7f37; --drop: #d1242c; --hl: #0969da; --chip: #eaeef2; }
-[data-theme="dark"] { --bg: #0f1419; --card: #1a222c; --fg: #e6edf3; --mut: #8b98a5; --line: #30363d; --keep: #3fb950; --drop: #f85149; --hl: #1f6feb; --chip: #21262d; }
+:root, [data-theme="light"] { --bg: #f7f8fa; --card: #ffffff; --fg: #232a31; --mut: #6b7683; --line: #dfe4ea;
+  --keep: #2e7d46; --keep-bg: #ddf2e3; --keep-bg2: #c9e9d2; --keep-line: #8fd0a6;
+  --drop: #c96a5e; --drop-bg: #fbe7e4; --drop-bg2: #f6d5d0; --drop-line: #ecb3ac;
+  --hl: #7c8cf8; --chip: #eef1f4; --mark-bg: #fdf0d3; --mark-ink: #6b4a08; }
+[data-theme="dark"] { --bg: #12161c; --card: #1a2029; --fg: #dbe2ea; --mut: #8d99a8; --line: #2c3440;
+  --keep: #8fdcab; --keep-bg: rgba(63,185,80,.20); --keep-bg2: rgba(63,185,80,.30); --keep-line: rgba(143,220,171,.55);
+  --drop: #f0a49b; --drop-bg: rgba(248,113,113,.18); --drop-bg2: rgba(248,113,113,.28); --drop-line: rgba(240,164,155,.55);
+  --hl: #9aa7ff; --chip: #222a35; --mark-bg: rgba(222,171,55,.28); --mark-ink: #ffd88a; }
 * { box-sizing: border-box; }
 body { background: var(--bg); color: var(--fg); font: 15px/1.55 -apple-system, system-ui, sans-serif; margin: 0; }
 header { position: sticky; top: 0; background: var(--card); border-bottom: 1px solid var(--line); padding: 10px 16px; display: flex; gap: 10px; align-items: center; z-index: 5; }
@@ -17,20 +23,23 @@ select, button { font: inherit; color: var(--fg); }
 main { max-width: 860px; margin: 0 auto; padding: 20px 16px 90px; }
 .meta { color: var(--mut); font-size: 13px; margin-bottom: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
 #passage { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; font-size: 16px; }
-#passage mark { background: #9e6a03; color: #fff; border-radius: 3px; padding: 0 2px; cursor: pointer; }
+#passage mark { background: var(--mark-bg); color: var(--mark-ink); border-radius: 4px; padding: 0 2px; cursor: pointer; }
 #passage mark.active { outline: 2px solid var(--hl); }
-#passage mark.done-k { background: var(--keep); }
-#passage mark.done-d { background: var(--drop); }
+#passage mark.done-k { background: linear-gradient(180deg, var(--keep-bg), var(--keep-bg2)); color: var(--fg); }
+#passage mark.done-d { background: linear-gradient(180deg, var(--drop-bg), var(--drop-bg2)); color: var(--fg); }
+#passage mark.active.done-k { outline-color: var(--keep-line); }
+#passage mark.active.done-d { outline-color: var(--drop-line); }
 #chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
 .chip { background: var(--chip); border: 1px solid var(--line); border-radius: 14px; padding: 2px 12px; font-size: 13px; cursor: pointer; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .chip.active { outline: 2px solid var(--hl); }
-.chip.k { border-color: var(--keep); } .chip.d { border-color: var(--drop); }
+.chip.active.k { outline-color: var(--keep-line); } .chip.active.d { outline-color: var(--drop-line); }
+.chip.k { border-color: var(--keep-line); background: var(--keep-bg); } .chip.d { border-color: var(--drop-line); background: var(--drop-bg); }
 #ref { margin-top: 10px; font-size: 13px; color: var(--mut); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
 #ref b.k { color: var(--keep); } #ref b.d { color: var(--drop); }
 .controls { display: flex; gap: 10px; margin-top: 14px; }
 button { cursor: pointer; border-radius: 8px; border: 1px solid var(--line); background: var(--card); padding: 10px 22px; }
-button.keep { border-color: var(--keep); } button.keep.on { background: var(--keep); color: #fff; }
-button.drop { border-color: var(--drop); } button.drop.on { background: var(--drop); color: #fff; }
+button.keep { border-color: var(--keep-line); } button.keep.on { background: linear-gradient(180deg, var(--keep-bg), var(--keep-bg2)); color: var(--fg); border-color: var(--keep); }
+button.drop { border-color: var(--drop-line); } button.drop.on { background: linear-gradient(180deg, var(--drop-bg), var(--drop-bg2)); color: var(--fg); border-color: var(--drop); }
 button.nav { padding: 10px 14px; }
 #mine { color: var(--mut); font-size: 13px; margin-top: 8px; min-height: 20px; }
 kbd { background: var(--chip); border-radius: 4px; padding: 1px 6px; font-size: 12px; }
@@ -74,7 +83,7 @@ footer { position: fixed; bottom: 0; left: 0; right: 0; background: var(--card);
 <div id="toast" role="status"></div>
 <div style="display:flex;align-items:center;gap:10px;padding:6px 16px;background:var(--card);border-bottom:1px solid var(--line);font-size:13px;color:var(--mut)">
   <span id="ruledLab" style="white-space:nowrap">0 ruled</span>
-  <div style="flex:1;height:6px;background:var(--chip);border-radius:3px;overflow:hidden"><div id="ruledFill" style="height:100%;width:0;background:var(--keep)"></div></div>
+  <div style="flex:1;height:6px;background:var(--chip);border-radius:3px;overflow:hidden"><div id="ruledFill" style="height:100%;width:0;background:var(--hl)"></div></div>
   <span id="ruledPct"></span>
 </div>
 <main>