:root {
  --r-g: #2fb487; --r-t: #f0b400; --r-m: #ff7a45; --r-e: #e0245e; --r-n: #a79bb0;
  --ui: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --read: "Lora", "Iowan Old Style", Georgia, serif;
}
:root, :root[data-theme="blossom"] {
  color-scheme: light;
  --bg: #fff6f8; --panel: #ffffff; --panel-2: #fff0f5; --ink: #2b1430; --ink-2: #6b4a6e; --ink-3: #a483a3;
  --line: #f6d9e4; --accent: #e0457b; --accent-2: #ff8a5b; --accent-ink: #ffffff; --accent-soft: #ffe3ec; --chip: #fbeef3;
  --grad: linear-gradient(135deg, #f0508a 0%, #ff8a5b 100%); --grad-2: linear-gradient(90deg, #f0508a, #c9b3ff, #ff8a5b);
  --shadow: 0 1px 2px color-mix(in srgb, #e0457b 8%, transparent), 0 8px 24px color-mix(in srgb, #e0457b 10%, transparent);
  --c-char-bg: #f0e8ff; --c-char: #6a3fb5; --c-tag-bg: #fff0e2; --c-tag: #b4561a;
  --c-rel-bg: #ffe2ed; --c-rel: #c2185b; --c-fan-bg: #e0f6ee; --c-fan: #1f7a5a; --c-warn-bg: #fff6d6; --c-warn: #8a6500;
  --blob1: rgba(255,170,200,.45); --blob2: rgba(255,200,160,.40); --blob3: rgba(205,180,255,.38);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='0.22'%3E%3Cg transform='translate%2840 50%29 scale%281%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%23f7a1c0'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%23f7a1c0'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%23f7a1c0'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%23f7a1c0'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%23f7a1c0'/%3E%3Ccircle r='4' fill='%23ffd166'/%3E%3C/g%3E%3Cg transform='translate%28160 150%29 scale%280.7%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%23c9b3ff'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%23c9b3ff'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%23c9b3ff'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%23c9b3ff'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%23c9b3ff'/%3E%3Ccircle r='4' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate%28170 40%29 scale%280.5%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%23ffb38a'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%23ffb38a'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%23ffb38a'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%23ffb38a'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%23ffb38a'/%3E%3Ccircle r='4' fill='%23fff'/%3E%3C/g%3E%3Cpath transform='translate%2870 160%29 rotate%280%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%239fdcbf'/%3E%3Cpath transform='translate%28110 80%29 rotate%28-20%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%239fdcbf'/%3E%3C/g%3E%3C/svg%3E");
  --r-paper: #fffafc; --r-paper-ink: #2b1430; --r-night: #1a0e1e; --r-night-ink: #f1dde9; --hl: #ffe27a;
}
:root[data-theme="matcha"] {
  color-scheme: light;
  --bg: #f6f3e6; --panel: #fffdf4; --panel-2: #eef0df; --ink: #0C3B2E; --ink-2: #3d5c50; --ink-3: #7f9488;
  --line: #dde3cc; --accent: #4f7d58; --accent-2: #FFBA00; --accent-ink: #ffffff; --accent-soft: #e2ecdb; --chip: #eef1e2;
  --grad: linear-gradient(135deg, #0C3B2E 0%, #6D9773 55%, #FFBA00 100%); --grad-2: linear-gradient(90deg, #6D9773, #BB8A52, #FFBA00);
  --shadow: 0 1px 2px color-mix(in srgb, #4f7d58 8%, transparent), 0 8px 24px color-mix(in srgb, #4f7d58 10%, transparent);
  --c-char-bg: #e2ecdb; --c-char: #2f5e3a; --c-tag-bg: #fff0c4; --c-tag: #8a5a00;
  --c-rel-bg: #f3e3cf; --c-rel: #8a5528; --c-fan-bg: #d8e6df; --c-fan: #0C3B2E; --c-warn-bg: #fff3cf; --c-warn: #7a5a00;
  --blob1: rgba(109,151,115,.30); --blob2: rgba(255,186,0,.22); --blob3: rgba(187,138,82,.22);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='0.2'%3E%3Cpath transform='translate%2830 60%29 rotate%28-30%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%236D9773'/%3E%3Cpath transform='translate%2846 52%29 rotate%2840%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%236D9773'/%3E%3Cg transform='translate%28160 150%29 scale%280.6%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%23FFBA00'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%23FFBA00'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%23FFBA00'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%23FFBA00'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%23FFBA00'/%3E%3Ccircle r='4' fill='%23BB8A52'/%3E%3C/g%3E%3Cpath transform='translate%28150 40%29 rotate%2810%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%236D9773'/%3E%3Ccircle cx='100' cy='110' r='3' fill='%23FFBA00'/%3E%3Ccircle cx='60' cy='180' r='2.5' fill='%23BB8A52'/%3E%3Ccircle cx='190' cy='90' r='2' fill='%23FFBA00'/%3E%3C/g%3E%3C/svg%3E");
  --r-paper: #fbf9ef; --r-paper-ink: #0C3B2E; --r-night: #0a2a21; --r-night-ink: #e6eedd; --hl: #ffd66b;
}
:root[data-theme="lavender"] {
  color-scheme: dark;
  --bg: #2A2438; --panel: #352F44; --panel-2: #3f3852; --ink: #f4f2f9; --ink-2: #DBD8E3; --ink-3: #a39cba;
  --line: #4c4462; --accent: #c4b5f5; --accent-2: #f3b6dc; --accent-ink: #2A2438; --accent-soft: #4a4166; --chip: #3f3852;
  --grad: linear-gradient(135deg, #5C5470 0%, #9d8ec9 50%, #DBD8E3 100%); --grad-2: linear-gradient(90deg, #9d8ec9, #f3b6dc, #DBD8E3);
  --shadow: 0 1px 2px color-mix(in srgb, #c4b5f5 8%, transparent), 0 8px 24px color-mix(in srgb, #c4b5f5 10%, transparent);
  --c-char-bg: #4a4166; --c-char: #e4dcff; --c-tag-bg: #3f3852; --c-tag: #DBD8E3;
  --c-rel-bg: #5C5470; --c-rel: #ffffff; --c-fan-bg: #2f3a4a; --c-fan: #c9dcf5; --c-warn-bg: #4a4030; --c-warn: #ffe3a6;
  --blob1: rgba(157,142,201,.22); --blob2: rgba(243,182,220,.10); --blob3: rgba(92,84,112,.45);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='0.22'%3E%3Cpath transform='translate%2850 50%29 scale%281%29' d='M0 -14 C2 -4 4 -2 14 0 C4 2 2 4 0 14 C-2 4 -4 2 -14 0 C-4 -2 -2 -4 0 -14Z' fill='%23DBD8E3'/%3E%3Cpath transform='translate%28160 140%29 scale%280.6%29' d='M0 -14 C2 -4 4 -2 14 0 C4 2 2 4 0 14 C-2 4 -4 2 -14 0 C-4 -2 -2 -4 0 -14Z' fill='%239d8ec9'/%3E%3Cpath transform='translate%28170 40%29 scale%280.35%29' d='M0 -14 C2 -4 4 -2 14 0 C4 2 2 4 0 14 C-2 4 -4 2 -14 0 C-4 -2 -2 -4 0 -14Z' fill='%23DBD8E3'/%3E%3Ccircle cx='100' cy='100' r='1.6' fill='%23DBD8E3'/%3E%3Ccircle cx='40' cy='170' r='1.2' fill='%239d8ec9'/%3E%3Ccircle cx='200' cy='190' r='1.4' fill='%23DBD8E3'/%3E%3C/g%3E%3C/svg%3E");
  --r-paper: #f4f2f8; --r-paper-ink: #2A2438; --r-night: #221d2e; --r-night-ink: #e6e2f0; --hl: #e9dcff;
}
:root[data-theme="sunset"] {
  color-scheme: light;
  --bg: #F6FFEA; --panel: #fffffa; --panel-2: #fff6dc; --ink: #4f1718; --ink-2: #87463a; --ink-3: #b88a74;
  --line: #f2e3bd; --accent: #C93638; --accent-2: #FA855A; --accent-ink: #ffffff; --accent-soft: #ffe4d6; --chip: #fff3d6;
  --grad: linear-gradient(135deg, #FFDE96 0%, #FA855A 45%, #C93638 100%); --grad-2: linear-gradient(90deg, #62C4DA, #FFDE96, #FA855A, #C93638);
  --shadow: 0 1px 2px color-mix(in srgb, #C93638 8%, transparent), 0 8px 24px color-mix(in srgb, #C93638 10%, transparent);
  --c-char-bg: #dff4fa; --c-char: #1d7891; --c-tag-bg: #fff0c4; --c-tag: #9a5a12;
  --c-rel-bg: #ffe1d6; --c-rel: #b02d2f; --c-fan-bg: #fde4d2; --c-fan: #a8481f; --c-warn-bg: #fff3cf; --c-warn: #7a5a00;
  --blob1: rgba(250,133,90,.32); --blob2: rgba(255,222,150,.55); --blob3: rgba(98,196,218,.30);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='0.22'%3E%3Cpath transform='translate%2850 55%29 scale%281%29' d='M0 -14 C2 -4 4 -2 14 0 C4 2 2 4 0 14 C-2 4 -4 2 -14 0 C-4 -2 -2 -4 0 -14Z' fill='%2362C4DA'/%3E%3Cpath transform='translate%28160 150%29 scale%280.7%29' d='M0 -14 C2 -4 4 -2 14 0 C4 2 2 4 0 14 C-2 4 -4 2 -14 0 C-4 -2 -2 -4 0 -14Z' fill='%23FA855A'/%3E%3Cpath transform='translate%28170 40%29 scale%280.45%29' d='M0 -14 C2 -4 4 -2 14 0 C4 2 2 4 0 14 C-2 4 -4 2 -14 0 C-4 -2 -2 -4 0 -14Z' fill='%23C93638'/%3E%3Cpath transform='translate%2860 175%29 scale%280.4%29' d='M0 -14 C2 -4 4 -2 14 0 C4 2 2 4 0 14 C-2 4 -4 2 -14 0 C-4 -2 -2 -4 0 -14Z' fill='%23FFDE96'/%3E%3Ccircle cx='110' cy='100' r='2.5' fill='%23FA855A'/%3E%3C/g%3E%3C/svg%3E");
  --r-paper: #fbfff4; --r-paper-ink: #4f1718; --r-night: #2a1415; --r-night-ink: #ffe9d6; --hl: #FFDE96;
}
:root[data-theme="peony"] {
  color-scheme: light;
  --bg: #FFF7E6; --panel: #fffcf5; --panel-2: #fdeef0; --ink: #2D3A47; --ink-2: #55606c; --ink-3: #8f97a2;
  --line: #f0dfdc; --accent: #B46A72; --accent-2: #F7C8D3; --accent-ink: #ffffff; --accent-soft: #fbe3e9; --chip: #f6eee8;
  --grad: linear-gradient(135deg, #F7C8D3 0%, #B46A72 60%, #2D3A47 100%); --grad-2: linear-gradient(90deg, #A8B58A, #F7C8D3, #B46A72, #A9B7C6);
  --shadow: 0 1px 2px color-mix(in srgb, #B46A72 8%, transparent), 0 8px 24px color-mix(in srgb, #B46A72 10%, transparent);
  --c-char-bg: #e6ecf2; --c-char: #3d5468; --c-tag-bg: #eef1e1; --c-tag: #56653a;
  --c-rel-bg: #fbe3e9; --c-rel: #8f4a53; --c-fan-bg: #e9eef3; --c-fan: #2D3A47; --c-warn-bg: #fff1d6; --c-warn: #7a5a00;
  --blob1: rgba(247,200,211,.55); --blob2: rgba(168,181,138,.28); --blob3: rgba(169,183,198,.35);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='0.24'%3E%3Cg transform='translate%2840 50%29 scale%281%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%23F7C8D3'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%23F7C8D3'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%23F7C8D3'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%23F7C8D3'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%23F7C8D3'/%3E%3Ccircle r='4' fill='%23FFF7E6'/%3E%3C/g%3E%3Cg transform='translate%28160 150%29 scale%280.75%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%23B46A72'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%23B46A72'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%23B46A72'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%23B46A72'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%23B46A72'/%3E%3Ccircle r='4' fill='%23F7C8D3'/%3E%3C/g%3E%3Cpath transform='translate%2870 160%29 rotate%280%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%23A8B58A'/%3E%3Cpath transform='translate%28118 78%29 rotate%28-25%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%23A8B58A'/%3E%3Ccircle cx='180' cy='50' r='3' fill='%23A9B7C6'/%3E%3Ccircle cx='30' cy='190' r='2' fill='%23A9B7C6'/%3E%3C/g%3E%3C/svg%3E");
  --r-paper: #fffaf0; --r-paper-ink: #2D3A47; --r-night: #1f2833; --r-night-ink: #efe6e2; --hl: #F7C8D3;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow-x: hidden; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--ui); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent); }
[hidden] { display: none !important; }

/* top bar */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { font: 600 21px var(--serif); color: var(--ink); text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.brand span { color: var(--accent); }
.search { flex: 1; max-width: 640px; }
.search input { width: 100%; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); outline: none; }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.top-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.btn { border: 1px solid var(--line); background: var(--panel); padding: 7px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--r-e); }
.btn:disabled { opacity: .55; cursor: default; }
.icon-btn { border: 1px solid transparent; background: transparent; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.icon-btn:hover { background: var(--panel-2); }
.only-narrow { display: none; }

/* layout */
.layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 57px); }
.sidebar { border-right: 1px solid var(--line); padding: 16px 14px 40px; position: sticky; top: 57px; height: calc(100vh - 57px); overflow-y: auto; }
.shelves a { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; cursor: pointer; }
.shelves a:hover { background: var(--panel-2); }
.shelves a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.shelves .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.facet { margin-top: 18px; }
.facet h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; cursor: pointer; user-select: none; }
.facet input { width: 100%; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; margin-bottom: 4px; }
.facet label { display: flex; gap: 7px; align-items: flex-start; padding: 3px 4px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.facet label:hover { background: var(--panel-2); }
.facet label span.t { flex: 1; overflow-wrap: anywhere; }
.facet label span.n { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.facet input[type=checkbox] { width: auto; margin: 2px 0 0; accent-color: var(--accent); }
.facet .more-btn { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 3px 4px; font-size: 12px; }
.main { padding: 16px 24px 60px; min-width: 0; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.count { font-weight: 600; white-space: nowrap; }
.active-filters { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.tools { display: flex; gap: 8px; margin-left: auto; }
.tools select, .reader-tools select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.seg button { border: 0; background: transparent; padding: 5px 10px; cursor: pointer; }
.seg button.on { background: var(--accent-soft); color: var(--accent); }
.fchip { display: inline-flex; gap: 6px; align-items: center; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; }
.fchip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 3px; }
.scan-banner { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; display: flex; gap: 12px; align-items: center; }
.bar { flex: 1; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.bar > div { height: 100%; background: var(--accent); transition: width .3s; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 7px; transition: transform .12s, border-color .12s; min-width: 0; }
.card:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.card-head { display: flex; gap: 10px; align-items: flex-start; }
.rating { flex: none; width: 26px; height: 26px; border-radius: 6px; color: #fff; font: 700 12px var(--ui); display: grid; place-items: center; margin-top: 2px; }
.rating.G { background: var(--r-g); } .rating.T { background: var(--r-t); } .rating.M { background: var(--r-m); }
.rating.E { background: var(--r-e); } .rating.N { background: var(--r-n); }
.card h3 { margin: 0; font: 600 17px/1.25 var(--serif); overflow-wrap: anywhere; }
.byline { color: var(--ink-2); font-size: 13px; }
.fandom { color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel { font-weight: 600; font-size: 13px; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chip { line-height: 1.35; background: var(--chip); color: var(--ink-2); border-radius: 6px; padding: 2px 7px; font-size: 12px; border: 0; cursor: pointer; text-align: left; }
.chip:hover { background: var(--accent-soft); color: var(--accent); }
.chip.more { background: transparent; color: var(--ink-3); cursor: default; }
.summary { color: var(--ink-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meta-row { display: flex; gap: 12px; flex-wrap: wrap; color: var(--ink-3); font-size: 12px; margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--line); align-items: center; }
.meta-row .dl { color: var(--r-g); font-weight: 600; }
.meta-row .wip { color: var(--r-t); font-weight: 600; }
.meta-row .err { color: var(--r-e); }
.meta-row .fav { color: var(--accent); }
.pbar { height: 3px; background: var(--panel-2); border-radius: 2px; overflow: hidden; }
.pbar > div { height: 100%; background: var(--accent); }

/* rows view */
.rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.rows .card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; display: grid;
  grid-template-columns: 26px minmax(200px, 2fr) minmax(150px, 1.4fr) minmax(150px, 1.4fr) 230px; gap: 14px; align-items: center; padding: 10px 14px; transform: none; }
.rows .card:hover { background: var(--panel-2); }
.rows .card h3 { font-size: 15px; }
.rows .summary, .rows .chips.tags, .rows .card-head .rating, .rows .pbar { display: none; }
.rows .card-head { display: contents; }
.rows .meta-row { border: 0; padding: 0; margin: 0; justify-content: flex-end; gap: 6px; }
.rows .rating-cell { display: grid; }
.rating-cell { display: none; }
.rows .col-main, .rows .col-rel, .rows .col-fan { min-width: 0; }
.rows .col-rel .chips { display: none; }
.rows .fandom { white-space: normal; }
.more { height: 40px; }
.empty { text-align: center; padding: 80px 20px; color: var(--ink-2); }
.empty h2 { font: 600 24px var(--serif); color: var(--ink); }

/* drawer */
.scrim { position: fixed; inset: 0; background: rgba(20,15,10,.35); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(600px, 100vw); background: var(--panel); z-index: 50; overflow-y: auto;
  transform: translateX(100%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; box-shadow: -8px 0 30px rgba(0,0,0,.15); }
.drawer.open { transform: none; visibility: visible; transition: transform .2s ease; }
.d-head { position: sticky; top: 0; background: var(--panel); padding: 18px 24px 14px; border-bottom: 1px solid var(--line); z-index: 1; }
.d-head h2 { margin: 6px 0 2px; font: 600 26px/1.2 var(--serif); padding-right: 30px; }
.d-close { position: absolute; top: 14px; right: 14px; }
.d-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.d-body { padding: 18px 24px 40px; }
.d-sec { margin-bottom: 18px; }
.d-sec h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.d-summary { font: 15px/1.6 var(--serif); color: var(--ink); white-space: pre-line; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.stat { background: var(--panel-2); border-radius: 8px; padding: 8px 10px; }
.stat b { display: block; font-size: 15px; }
.stat span { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.muted { color: var(--ink-3); }
.file-info { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(20,15,10,.4); z-index: 60; display: grid; place-items: start center; padding: 6vh 16px; overflow-y: auto; }
.modal-card { background: var(--panel); border-radius: 14px; width: min(720px, 100%); padding: 20px 24px 24px; box-shadow: var(--shadow); }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h2, .modal-card h3 { font-family: var(--serif); margin: 0; }
.modal-card h3 { margin-top: 22px; margin-bottom: 8px; }
.add-source { display: flex; gap: 8px; margin-top: 14px; }
.add-source input { flex: 1; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); min-width: 0; }
.hint { color: var(--ink-3); font-size: 12px; margin: 6px 0 12px; }
.src { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.src-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.src-name { font-weight: 600; overflow-wrap: anywhere; }
.src-msg { font-size: 12px; color: var(--ink-2); margin: 6px 0; }
.src-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.src-btns .btn { padding: 4px 10px; font-size: 12px; }
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 18px; text-align: center; display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); margin-top: 16px; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.link { color: var(--accent); cursor: pointer; text-decoration: underline; }
.settings { display: grid; gap: 12px; }
.settings label { display: grid; gap: 4px; font-weight: 600; font-size: 13px; }
.settings input, .settings select { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font-weight: 400; }
.cache-use { font-size: 12px; color: var(--ink-3); margin-top: -6px; }

/* reader */
.reader { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; --rbg: #fbf8f2; --rink: #2a241d; background: var(--rbg); color: var(--rink); }
.reader[data-rt="sepia"] { --rbg: #f1e7d0; --rink: #3b2f1e; }
.reader[data-rt="dark"] { --rbg: #121110; --rink: #d9d2c5; }
.reader-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid color-mix(in srgb, var(--rink) 14%, transparent); }
.reader-bar .btn, .reader-bar select, .reader-bar .seg { background: transparent; border-color: color-mix(in srgb, var(--rink) 20%, transparent); color: var(--rink); }
.reader-bar .icon-btn { color: var(--rink); }
.reader-bar .seg button.on { background: color-mix(in srgb, var(--rink) 12%, transparent); color: var(--rink); }
.reader-title { flex: 1; font: 600 15px var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.reader-tools { display: flex; gap: 6px; align-items: center; }
.reader-tools select { max-width: 200px; }
.reader-progress { height: 2px; background: transparent; }
.reader-progress > div { height: 100%; width: 0; background: var(--accent); }
.reader-scroll { flex: 1; overflow-y: auto; }
.book { max-width: 680px; margin: 0 auto; padding: 40px 24px 120px; font: var(--fs, 19px)/1.7 var(--serif); }
.book h1, .book h2, .book h3 { font-family: var(--serif); line-height: 1.25; }
.book .chapter { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid color-mix(in srgb, var(--rink) 12%, transparent); }
.book p { margin: 0 0 1em; }
.book blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid color-mix(in srgb, var(--rink) 20%, transparent); }
.book img { max-width: 100%; height: auto; }
.book a { color: inherit; }
.book dl.tags, .book dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: .8em; }
.book dt { font-weight: 700; }
.book dd { margin: 0; }
.book hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--rink) 20%, transparent); margin: 2em 0; }
.pdf-frame { flex: 1; border: 0; width: 100%; background: #525659; }
.loading { display: grid; place-items: center; height: 60vh; font: 16px var(--serif); opacity: .7; text-align: center; padding: 20px; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 10px; z-index: 100; box-shadow: var(--shadow); max-width: 90vw; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 57px; left: 0; bottom: 0; width: 280px; background: var(--bg); z-index: 30; transform: translateX(-100%); transition: transform .2s; height: auto; }
  .sidebar.open { transform: none; box-shadow: var(--shadow); }
  .only-narrow { display: inline-block; }
  .main { padding: 12px 16px 60px; }
  .top { padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
  .search { order: 5; flex-basis: 100%; max-width: none; }
  .layout { min-height: calc(100vh - 105px); }
  .sidebar { top: 105px; }
  .cards { grid-template-columns: 1fr; }
  .rows .card { grid-template-columns: 26px 1fr; }
  .rows .col-rel, .rows .col-fan { display: none; }
  .rows .meta-row { grid-column: 2; justify-content: flex-start; }
  .reader-tools select { max-width: 110px; }
  .reader-title { display: none; }
}


/* ================= Blossom theme ================= */
body {
  background:
    radial-gradient(900px 600px at -10% -10%, var(--blob1), transparent 60%),
    radial-gradient(800px 600px at 110% 10%, var(--blob2), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, var(--blob3), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: var(--pattern);
}
.top, .layout, .modal, .drawer, .scrim, .reader, .toast { position: relative; z-index: 1; }
.top { position: sticky; z-index: 20; background: color-mix(in srgb, var(--panel) 72%, transparent); border-bottom: 1px solid var(--line); }
.drawer { position: fixed; z-index: 50; } .scrim { position: fixed; z-index: 40; } .modal { position: fixed; z-index: 60; }
.reader { position: fixed; z-index: 70; } .toast { position: fixed; z-index: 100; }
.brand { display: inline-flex; align-items: center; gap: 0; font: 700 25px/1 var(--serif); font-style: italic; letter-spacing: -.02em; }
.brand span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand::before { content: ""; width: 28px; height: 28px; flex: none; margin-right: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 28 28'%3E%3Cg fill='%23f0508a'%3E%3Ccircle cx='0' cy='-6.5' r='5.5'/%3E%3Ccircle cx='6.2' cy='-2' r='5.5'/%3E%3Ccircle cx='3.8' cy='5.3' r='5.5'/%3E%3Ccircle cx='-3.8' cy='5.3' r='5.5'/%3E%3Ccircle cx='-6.2' cy='-2' r='5.5'/%3E%3C/g%3E%3Ccircle r='3.4' fill='%23ffd166'/%3E%3C/svg%3E") center/contain no-repeat; }
.search input { border-radius: 999px; padding: 10px 18px; background: var(--panel); border-color: var(--line); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--accent) 6%, transparent); }
.btn { border-radius: 999px; border-color: var(--line); }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--grad); border: 0; color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn.primary:hover { color: #fff; filter: brightness(1.05) saturate(1.1); }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.sidebar { background: color-mix(in srgb, var(--panel) 55%, transparent); }
.shelves a { border-radius: 999px; }
.shelves a.on { background: var(--grad); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 30%, transparent); }
.shelves a.on .n { color: rgba(255,255,255,.85); }
.facet h4 { color: var(--accent); }
.seg { border-radius: 999px; }
.seg button.on { background: var(--grad); color: #fff; }
.fchip { background: var(--grad); color: #fff; }
.count { font: 600 italic 20px var(--serif); }

.card { border-radius: 18px; border: 1px solid var(--line); position: relative; overflow: hidden; padding-top: 18px; }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--grad); }
.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-3px); box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 18%, transparent); }
.card h3 { font: 600 19px/1.2 var(--serif); }
.rating { border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.rating.G { background: var(--r-g); } .rating.T { background: var(--r-t); } .rating.M { background: var(--r-m); } .rating.E { background: var(--r-e); } .rating.N { background: var(--r-n); }
.rel { color: var(--c-rel); }
.fandom { color: var(--c-fan); font-weight: 500; }
.chip { border-radius: 999px; padding: 2px 9px; }
.chip[data-f="characters"] { background: var(--c-char-bg); color: var(--c-char); }
.chip[data-f="tags"] { background: var(--c-tag-bg); color: var(--c-tag); }
.chip[data-f="relationships"] { background: var(--c-rel-bg); color: var(--c-rel); }
.chip[data-f="fandoms"] { background: var(--c-fan-bg); color: var(--c-fan); }
.chip[data-f="warnings"] { background: var(--c-warn-bg); color: var(--c-warn); }
.chip:hover { background: var(--grad) !important; color: #fff !important; }
.chip.more:hover { background: transparent !important; color: var(--ink-3) !important; }
.meta-row { border-top: 1px dashed var(--line); }
.meta-row .dl { color: var(--r-g); } .meta-row .fav { color: var(--accent); }
.pbar > div, .bar > div, .reader-progress > div { background: var(--grad); }
.rows { border-radius: 18px; }
.rows .card { border-radius: 0; padding-top: 10px; }
.rows .card::before { top: 0; bottom: 0; left: 0; right: auto; width: 4px; height: auto; }
.rows .card:hover { transform: none; box-shadow: none; }
.drawer { border-left: 1px solid var(--line); }
.d-head { background: linear-gradient(180deg, var(--accent-soft), var(--panel)); }
.d-head h2 { font: 700 30px/1.15 var(--serif); }
.d-sec h4 { color: var(--accent); }
.d-summary { font-family: var(--read); }
.stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; }
.stat b { font-family: var(--serif); font-size: 18px; color: var(--accent); }
.modal-card { border-radius: 22px; border: 1px solid var(--line); }
.modal-head h2 { font-style: italic; }
.drop { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 18px; background: var(--panel-2); }
.empty h2 { font-style: italic; }
.toast { background: var(--grad); color: #fff; border-radius: 999px; }

/* reader: wide like AO3, width switchable */
.reader { --rbg: var(--r-paper); --rink: var(--r-paper-ink); }
.reader[data-rt="sepia"] { --rbg: #f4e8cf; --rink: #3b2f1e; }
.reader[data-rt="dark"] { --rbg: var(--r-night); --rink: var(--r-night-ink); }
.reader-bar { background: color-mix(in srgb, var(--rbg) 90%, var(--accent) 10%); }
.reader-title { font-style: italic; font-size: 17px; }
.book { max-width: none; width: 100%; padding: 32px max(24px, 5vw) 120px; font-family: var(--read); }
.reader[data-rw="wide"] .book { max-width: 1040px; }
.reader[data-rw="narrow"] .book { max-width: 720px; }
.book h1, .book h2, .book h3 { color: color-mix(in srgb, var(--rink) 70%, var(--accent)); }

/* filters on the right */
.layout { grid-template-columns: minmax(0, 1fr) 280px; }
.sidebar { order: 2; border-right: 0; border-left: 1px solid var(--line); }
.main { order: 1; }
/* header search with button */
.search { display: flex; gap: 8px; align-items: center; }
.search input { flex: 1; min-width: 0; }
.search-btn { padding: 9px 18px; }
/* find in story */
.reader-find { display: flex; align-items: center; gap: 4px; }
.reader-find input { width: 200px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rink) 22%, transparent); background: color-mix(in srgb, var(--rbg) 80%, #fff 20%); color: var(--rink); outline: none; }
.reader-find input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.find-count { font-size: 12px; opacity: .75; min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.book mark.hl { background: var(--hl); color: #1d1420; border-radius: 3px; padding: 0 1px; }
.book mark.hl.cur { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { left: auto; right: 0; transform: translateX(100%); border-left: 1px solid var(--line); background: var(--bg); }
  .sidebar.open { transform: none; }
  .reader-bar { flex-wrap: wrap; }
  .reader-find { order: 5; flex-basis: 100%; }
  .reader-find input { flex: 1; width: auto; }
}

/* ================= theme switcher + extra flourishes ================= */
.brand span { background: var(--grad-2); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s ease-in-out infinite alternate; }
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.brand::before { -webkit-mask: var(--brand-mask) center/contain no-repeat; mask: var(--brand-mask) center/contain no-repeat; background: var(--grad); }
:root { --brand-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 28 28'%3E%3Cg fill='%23000'%3E%3Ccircle cx='0' cy='-6.5' r='5.5'/%3E%3Ccircle cx='6.2' cy='-2' r='5.5'/%3E%3Ccircle cx='3.8' cy='5.3' r='5.5'/%3E%3Ccircle cx='-3.8' cy='5.3' r='5.5'/%3E%3Ccircle cx='-6.2' cy='-2' r='5.5'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="lavender"], :root[data-theme="sunset"] { --brand-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 30 30'%3E%3Cpath d='M0 -14 C2 -4 4 -2 14 0 C4 2 2 4 0 14 C-2 4 -4 2 -14 0 C-4 -2 -2 -4 0 -14Z'/%3E%3C/svg%3E"); }
:root[data-theme="matcha"] { --brand-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M4 24 C4 10 12 4 25 3 C24 16 18 24 4 24Z'/%3E%3C/svg%3E"); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad-2); opacity: .7; }
.btn.primary { background: var(--grad); background-size: 160% 160%; color: var(--accent-ink); transition: background-position .4s, transform .15s; }
.btn.primary:hover { background-position: 100% 100%; transform: translateY(-1px); color: var(--accent-ink); }
.shelves a.on { color: var(--accent-ink); } .shelves a.on .n { color: color-mix(in srgb, var(--accent-ink) 80%, transparent); }
.seg button.on, .fchip, .toast { color: var(--accent-ink); }
.chip:hover { color: var(--accent-ink) !important; }
.card::before { background: var(--grad); }
.d-head { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 85%, transparent), var(--panel)); }
.d-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--grad-2); }
.count { background: var(--grad-2); -webkit-background-clip: text; background-clip: text; color: transparent; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
* { scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent; }

.theme-btn { display: inline-flex; align-items: center; gap: 8px; }
.theme-btn .sw { width: 18px; height: 18px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line); }
.theme-pop { position: absolute; top: 58px; right: 16px; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 16px; width: min(380px, calc(100vw - 32px));
  box-shadow: 0 20px 50px color-mix(in srgb, var(--ink) 22%, transparent); display: grid; gap: 10px; }
.theme-pop h3 { margin: 0 0 2px; font: 600 italic 20px var(--serif); }
.theme-opt { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 16px; border: 2px solid transparent; background: none; cursor: pointer; text-align: left; color: var(--ink); }
.theme-opt:hover { background: var(--panel-2); }
.theme-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.theme-opt .pv { height: 48px; border-radius: 12px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.theme-opt .dots { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 3px; }
.theme-opt .dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); }
.theme-opt b { display: block; font: 600 16px var(--serif); }
.theme-opt small { color: var(--ink-3); font-size: 12px; }

/* reader flourishes: soft, theme-tinted */
.reader-bar { position: relative; background: color-mix(in srgb, var(--rbg) 88%, var(--accent) 12%); }
.reader-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad-2); opacity: .8; }
.reader-progress { height: 3px; } .reader-progress > div { background: var(--grad-2); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
.reader-scroll { background:
  radial-gradient(700px 400px at 100% 0%, color-mix(in srgb, var(--blob1) 50%, transparent), transparent 70%),
  radial-gradient(700px 400px at 0% 100%, color-mix(in srgb, var(--blob3) 50%, transparent), transparent 70%), var(--rbg); }
.reader[data-rt="sepia"] .reader-scroll { background: var(--rbg); }
.book h1, .book h2 { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reader[data-rt="dark"] .book h1, .reader[data-rt="dark"] .book h2 { background: var(--grad-2); -webkit-background-clip: text; background-clip: text; }
.book .chapter { border-bottom: 0; position: relative; }
.book .chapter::after { content: "✦  ✿  ✦"; display: block; text-align: center; letter-spacing: .6em; margin-top: 40px; font-size: 14px;
  background: var(--grad-2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.book .chapter:last-child::after { content: none; }
.book blockquote { border-left: 3px solid; border-image: var(--grad) 1; }
.book ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.reader-find input:focus { border-color: var(--accent); }
.reader-bar .seg button.on { background: var(--grad); color: var(--accent-ink); }

/* web build */
.pdf-page { background: #fff; margin: 0 auto 18px; box-shadow: 0 4px 18px color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 6px; overflow: hidden; padding: 0 !important; }
.pdf-page canvas { display: block; width: 100%; height: auto; }
.book .pdf-page.chapter::after { content: none; }
.hint.warn { color: var(--r-e); font-weight: 600; }
.backup { display: grid; gap: 6px; margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; }
.backup label.btn { display: inline-block; font-weight: 400; }
.foot { position: relative; z-index: 1; text-align: center; font-size: 12px; color: var(--ink-3); padding: 18px 16px 28px; }

/* rating badges: one colour, follows the theme */
.rating, .rating.G, .rating.T, .rating.M, .rating.E, .rating.N { background: var(--grad); color: var(--accent-ink); }


/* ================= Ruby Mocha (default theme) ================= */
:root, :root[data-theme="ruby"] {
  color-scheme: light;
  --bg: #f2ebe9; --panel: #fcf9f8; --panel-2: #efe6e4; --ink: #482C3D; --ink-2: #735453; --ink-3: #9b8189;
  --line: #e2d4d3; --accent: #8B445C; --accent-2: #A38893; --accent-ink: #ffffff; --accent-soft: #f1e1e6; --chip: #ede3e2;
  --grad: linear-gradient(135deg, #482C3D 0%, #8B445C 55%, #A38893 100%); --grad-2: linear-gradient(90deg, #8B445C, #A38893, #735453);
  --shadow: 0 1px 2px rgba(72,44,61,.06), 0 8px 24px rgba(72,44,61,.08);
  --c-char-bg: #ece3ea; --c-char: #6b4a5f; --c-tag-bg: #efe4e1; --c-tag: #735453;
  --c-rel-bg: #f2dfe5; --c-rel: #8B445C; --c-fan-bg: #e9e1e6; --c-fan: #482C3D; --c-warn-bg: #f6e9cf; --c-warn: #7a5a00;
  --blob1: rgba(139,68,92,.16); --blob2: rgba(163,136,147,.24); --blob3: rgba(115,84,83,.14);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='.16'%3E%3Cg transform='translate%2840 50%29 scale%281%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%23A38893'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%23A38893'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%23A38893'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%23A38893'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%23A38893'/%3E%3Ccircle r='4' fill='%23E6DCDB'/%3E%3C/g%3E%3Cg transform='translate%28160 150%29 scale%280.7%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%238B445C'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%238B445C'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%238B445C'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%238B445C'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%238B445C'/%3E%3Ccircle r='4' fill='%23E6DCDB'/%3E%3C/g%3E%3Cg transform='translate%28170 40%29 scale%280.45%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%23735453'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%23735453'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%23735453'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%23735453'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%23735453'/%3E%3Ccircle r='4' fill='%23E6DCDB'/%3E%3C/g%3E%3Cpath transform='translate%2870 160%29 rotate%280%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%23735453'/%3E%3Cpath transform='translate%28118 78%29 rotate%28-25%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%23A38893'/%3E%3C/g%3E%3C/svg%3E");
  --r-paper: #fbf7f5; --r-paper-ink: #482C3D; --r-night: #24161f; --r-night-ink: #eadcdc; --hl: #ecc6d2;
}
/* AO3-style header bar for Ruby Mocha */
:root:not([data-theme]) .top, :root[data-theme="ruby"] .top { background: linear-gradient(90deg, #482C3D, #8B445C); border-bottom: 0; color: #fff; }
:root:not([data-theme]) .top .brand, :root[data-theme="ruby"] .top .brand { color: #fff; }
:root:not([data-theme]) .top .brand span, :root[data-theme="ruby"] .top .brand span { background: linear-gradient(90deg, #E6DCDB, #f3c9d6, #E6DCDB); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; }
:root:not([data-theme]) .top .brand::before, :root[data-theme="ruby"] .top .brand::before { background: #E6DCDB; }
:root:not([data-theme]) .top .btn, :root[data-theme="ruby"] .top .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
:root:not([data-theme]) .top .btn.primary, :root[data-theme="ruby"] .top .btn.primary { background: #E6DCDB; color: #482C3D; box-shadow: none; }
:root:not([data-theme]) .top .icon-btn, :root[data-theme="ruby"] .top .icon-btn { color: #fff; }
:root:not([data-theme]) .top::after, :root[data-theme="ruby"] .top::after { background: linear-gradient(90deg, #A38893, #E6DCDB, #A38893); opacity: .6; }

/* ================= AO3-style list: one box per fic ================= */
.blurbs { display: flex; flex-direction: column; gap: 14px; }
.card.blurb { display: block; padding: 16px 20px 12px; border-radius: 14px; cursor: pointer; }
.card.blurb:hover { transform: none; }
.card.blurb::before { height: 4px; }
.b-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; }
.req { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: 24px 24px; gap: 3px; }
.req .sq { width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; font: 700 10.5px/1 var(--ui); color: #fff; letter-spacing: -.02em; }
.sq-r { background: var(--accent); } .sq-c { background: var(--c-char); }
.sq-w { background: var(--ink-2); } .sq-s { background: var(--accent-2); }
.b-title h3 { margin: 0; font: 600 19px/1.25 var(--serif); color: var(--accent); }
.b-title .by { font: 400 14px var(--ui); color: var(--ink-2); }
.b-title .by b { color: var(--ink); font-weight: 600; }
.b-date { font-size: 12px; color: var(--ink-3); white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.b-date .fav { color: var(--accent); } .b-date .dl { color: var(--r-g); font-weight: 600; }
.b-fandoms, .b-tags { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 0; }
.b-fandoms li, .b-tags li { display: inline; font-size: 13px; }
.b-fandoms li:not(:last-child)::after, .b-tags li:not(:last-child)::after { content: ","; color: var(--ink-3); margin-right: 6px; }
.b-tags { margin-top: 10px; }
.card.blurb .chip.tagl { all: unset; cursor: pointer; border-bottom: 1px dotted currentColor; line-height: 1.5; }
.card.blurb .chip.tagl:hover { background: none !important; color: var(--accent) !important; border-bottom-style: solid; }
.b-fandoms .tagl { color: var(--ink-2); font-weight: 500; }
.b-tags .warn .tagl { color: var(--c-warn); font-weight: 700; }
.b-tags .rel .tagl { color: var(--c-rel); font-weight: 600; }
.b-tags .char .tagl { color: var(--c-char); }
.b-tags .free .tagl { color: var(--ink-2); }
.b-tags .more-tags { color: var(--ink-3); font-size: 12px; }
.b-summary { margin: 12px 0 0; padding: 2px 0 2px 14px; border-left: 3px solid; border-image: var(--grad) 1; font: 14.5px/1.6 var(--read); color: var(--ink); white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.b-series { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.b-pending { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.b-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 6px; margin: 12px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink-3); }
.b-stats dt { font-weight: 600; color: var(--ink-2); } .b-stats dd { margin: 0 10px 0 0; }
@media (max-width: 640px) {
  .b-head { grid-template-columns: auto 1fr; }
  .b-date { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 10px; }
  .card.blurb { padding: 14px 14px 10px; }
}

/* ================= simpler Add fics popup ================= */
.src-card { width: min(560px, 100%); }
.src-card .add-source { margin-top: 12px; }
.src { padding: 10px 12px; margin: 10px 0 0; border-radius: 12px; }
.src-row { display: flex; align-items: center; gap: 10px; }
.src-main { flex: 1; min-width: 0; }
.src-name { font-weight: 600; color: var(--ink); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-name:hover { color: var(--accent); }
.src-msg { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.src-btns { display: flex; align-items: center; gap: 4px; flex: none; }
.src-btns .btn { padding: 5px 12px; font-size: 13px; }
.src .bar { margin-top: 8px; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.src-card .drop { display: block; cursor: pointer; padding: 14px; margin-top: 14px; font-size: 13px; }
.src-card .drop b { color: var(--accent); }
details.more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
details.more summary { cursor: pointer; color: var(--ink-2); font-size: 13px; font-weight: 600; list-style: none; }
details.more summary::before { content: "▸ "; } details.more[open] summary::before { content: "▾ "; }
details.more .settings { margin-top: 12px; }
.b-fandoms, .b-tags { display: block; line-height: 1.7; }
.b-fandoms li, .b-tags li { white-space: normal; }
.card.blurb .chip.tagl { display: inline; }
@media (max-width: 860px) {
  .sidebar { top: var(--top-h, 57px) !important; bottom: 0; height: auto !important; box-shadow: -10px 0 30px rgba(0,0,0,.18); }
}

.modal { display: block; }
.modal-card { margin: 0 auto; }

.more-opts { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.more-toggle { border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.more-opts .settings { margin-top: 12px; }


/* ================= include / exclude filters ================= */
.frow { display: grid; grid-template-columns: 20px 1fr auto 22px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.frow:hover { background: var(--panel-2); }
.frow .t { cursor: pointer; overflow-wrap: anywhere; }
.frow .n { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fbtn { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--panel); display: grid; place-items: center; padding: 0; cursor: pointer; font-size: 11px; line-height: 1; color: transparent; }
.fbtn.inc-btn:hover { border-color: var(--accent); }
.fbtn.exc-btn { border-color: transparent; background: transparent; color: var(--ink-3); opacity: 0; transition: opacity .15s; }
.frow:hover .exc-btn, .exc-btn:focus-visible { opacity: 1; }
.fbtn.exc-btn:hover { color: var(--r-e); background: color-mix(in srgb, var(--r-e) 12%, transparent); }
.frow.inc { color: var(--ink); font-weight: 600; }
.frow.inc .inc-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.frow.exc .t { text-decoration: line-through; color: var(--r-e); }
.frow.exc .n { color: var(--r-e); }
.frow.exc .exc-btn { opacity: 1; color: #fff; background: var(--r-e); border-color: var(--r-e); }
.fchip.exc { background: color-mix(in srgb, var(--r-e) 14%, var(--panel)); color: var(--r-e); }
@media (hover: none) { .fbtn.exc-btn { opacity: .6; } }

/* ================= reading settings panel ================= */
.reader-bar { gap: 14px; padding: 8px 18px; min-height: 56px; }
.reader-bar .btn { padding: 6px 14px; }
.reader-tools { gap: 10px; }
.reader-tools select { max-width: 230px; padding: 6px 10px; border-radius: 999px; }
.aa-btn { font: 600 15px var(--serif) !important; padding: 5px 14px !important; }
.aa-pop { position: absolute; top: 60px; right: 16px; z-index: 5; width: min(380px, calc(100vw - 24px)); background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: grid; gap: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.18); font: 14px var(--ui); }
.aa-pop .aa-text { display: grid; gap: 14px; }
.aa-row { display: grid; gap: 6px; }
.aa-lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.aa-pop .seg { display: flex; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); padding: 3px; gap: 3px; }
.aa-pop .seg button { flex: 1; border-radius: 8px; padding: 7px 6px; font-size: 13px; color: var(--ink-2); background: transparent; }
.aa-pop .seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }
.aa-pop .f-serif { font-family: "Lora", Georgia, serif !important; } .aa-pop .f-classic { font-family: Georgia, "Times New Roman", serif !important; }
.aa-pop .f-sans { font-family: "DM Sans", sans-serif !important; } .aa-pop .f-easy { font-family: "Atkinson Hyperlegible", sans-serif !important; }
.aa-size { display: flex; align-items: center; gap: 10px; }
.aa-size .btn { flex: 1; border-radius: 10px; }
.aa-size span { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.aa-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.aa-check input { margin-top: 3px; accent-color: var(--accent); }
.aa-check small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
@media (max-width: 860px) { .aa-pop { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; } }

/* the book itself */
.book { line-height: var(--lh, 1.75); }
.book p { margin: 0 0 1.05em; }
.reader[data-font="serif"] .book { font-family: "Lora", Georgia, serif; }
.reader[data-font="classic"] .book { font-family: Georgia, "Times New Roman", serif; }
.reader[data-font="sans"] .book { font-family: "DM Sans", -apple-system, sans-serif; }
.reader[data-font="easy"] .book { font-family: "Atkinson Hyperlegible", -apple-system, sans-serif; letter-spacing: .01em; }
.reader[data-align="justify"] .book p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.reader[data-rw="narrow"] .book { max-width: 680px; }
.reader[data-rw="wide"] .book { max-width: 920px; }
.reader[data-rw="full"] .book { max-width: none; }
.reader.plain .book *:not(h1):not(h2):not(h3) { font-family: inherit !important; font-size: inherit !important; color: inherit !important; background: none !important; letter-spacing: normal !important; }
.reader.plain .book p, .reader.plain .book div, .reader.plain .book center { text-align: left !important; }
.reader.plain[data-align="justify"] .book p { text-align: justify !important; }
.reader.plain .book center { display: block; }

/* ================= typography & spacing polish ================= */
body { font-size: 15px; line-height: 1.5; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga"; }
h1, h2, h3, h4 { text-wrap: balance; }
p, blockquote, .summary, .d-summary, .b-summary { text-wrap: pretty; }
.top { gap: 14px; padding: 10px 20px; }
.main { padding: 18px 28px 64px; }
.toolbar { margin-bottom: 16px; min-height: 36px; }
.count { font-size: 22px; line-height: 1; }
.sidebar { padding: 18px 16px 48px; }
.shelves a { padding: 7px 12px; font-size: 14px; }
.facet { margin-top: 22px; }
.facet h4 { font-size: 11.5px; margin-bottom: 8px; padding: 0 6px; }
.facet input[data-fsearch] { margin: 0 0 6px; font-size: 13px; padding: 6px 10px; border-radius: 8px; }
.facet .more-btn { padding: 4px 6px; font-size: 12.5px; }
.card.blurb { padding: 18px 22px 14px; }
.b-title h3 { font-size: 20px; line-height: 1.25; }
.b-title .by { font-size: 14.5px; }
.b-fandoms li { font-size: 13.5px; }
.b-tags li { font-size: 13.5px; }
.b-tags { line-height: 1.75; }
.b-summary { font-size: 15px; line-height: 1.65; margin-top: 14px; }
.b-stats { font-size: 12.5px; gap: 4px 6px; }
.card h3 { line-height: 1.3; }
.summary { font-size: 14px; line-height: 1.55; }
.drawer .d-head { padding: 22px 28px 16px; }
.drawer .d-body { padding: 20px 28px 48px; }
.d-sec { margin-bottom: 22px; }
.d-sec h4 { font-size: 11.5px; margin-bottom: 8px; }
.d-summary { font-size: 16px; line-height: 1.7; }
.d-actions { gap: 10px; margin-top: 14px; }
.modal-card { padding: 22px 26px 24px; }
.src-msg, .cache-use { line-height: 1.45; }
.foot { font-size: 12.5px; line-height: 1.5; max-width: 640px; margin: 0 auto; }
@media (max-width: 860px) { .main { padding: 14px 14px 56px; } .card.blurb { padding: 16px 16px 12px; } .b-title h3 { font-size: 18px; } }

.nomatch { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 70px 20px; color: var(--ink-2); }
.nomatch b { font: 600 italic 22px var(--serif); color: var(--ink); }
.nomatch .btn { margin-top: 8px; }
@media (max-width: 860px) {
  .reader-bar { flex-wrap: wrap; row-gap: 8px; padding: 8px 12px; }
  .reader-tools { margin-left: auto; gap: 6px; min-width: 0; }
  .reader-tools select { max-width: 120px; padding: 6px 8px; }
  .reader-bar .seg button { padding: 5px 8px; font-size: 12.5px; }
  .reader-bar .btn { padding: 6px 10px; }
  .reader-find { order: 5; flex-basis: 100%; }
  .aa-pop { top: auto; bottom: 12px; }
}
@media (max-width: 480px) { #readerTheme { display: none; } }
.aa-theme { display: none; }
@media (max-width: 480px) { .aa-theme { display: grid; } }
.reader-find input { min-width: 0; }
.reader-find .find-count:empty { display: none; }
@media (max-width: 860px) { .reader-find { display: flex; } .reader-find input { flex: 1 1 auto; width: auto; } .reader-find .icon-btn { flex: none; } }
.book a, .book p { overflow-wrap: anywhere; }

/* italic letters at the end of gradient text were being clipped */
.brand span, .count { padding-right: .14em; margin-right: -.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root[data-theme="sunset"] .brand span { background-image: linear-gradient(90deg, #FA855A, #C93638, #FA855A); }
:root[data-theme="peony"] .brand span { background-image: linear-gradient(90deg, #B46A72, #8f4a53, #B46A72); }

/* relationship tag stands apart from character / other tags */
.rels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 4px; }
.chip.rel-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel)) !important; color: var(--c-rel) !important;
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); font-weight: 650; font-size: 13.5px; line-height: 1.3; }
.chip.rel-chip .rel-ico { font-size: 11px; color: var(--accent); }
.chip.rel-chip:hover { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent); }
.chip.rel-chip:hover .rel-ico { color: var(--accent-ink); }
.chip.more { align-self: center; line-height: 1.35; padding: 2px 4px; }
.rows .col-rel .rels { margin: 0; }
@media (max-width: 480px) { #openSources { font-size: 13px; padding: 6px 10px; } }

/* tidy dropdowns everywhere: no native arrow, consistent chevron + spacing */
select.btn, .tools select, .reader-tools select, .settings select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23735453' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px 7px;
  padding-right: 36px !important; cursor: pointer; line-height: 1.3; font: inherit; }
:root[data-theme="lavender"] select.btn, :root[data-theme="lavender"] .tools select, :root[data-theme="lavender"] .settings select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23DBD8E3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.reader-tools select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tools select { padding: 7px 14px; border-radius: 999px; }
.d-actions { align-items: stretch; }
.d-actions .btn, .d-actions .shelf-sel { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 18px; font-size: 15px; }
.d-actions .shelf-sel { display: inline-block; background-color: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; min-width: 132px; }
.d-actions .shelf-sel:hover { border-color: var(--accent); }
.d-actions .shelf-sel:focus-visible { outline: 3px solid var(--accent-soft); border-color: var(--accent); }

/* more breathing room between the relationship pill and the other tags */
.rels { margin: 6px 0 10px; }
.rels + .chips, .col-rel .rels + .chips { margin-top: 0; }
.card .chips + .chips { margin-top: 6px; }
.chips .chip.more, .rels .chip.more { align-self: stretch; display: inline-flex; align-items: center; margin: 0; padding: 0 4px !important; line-height: 1 !important; font-size: 12.5px; }
.d-head .rating { border-radius: 999px !important; width: auto !important; height: 24px !important; padding: 0 10px !important; font-size: 11.5px !important; box-shadow: none; }

/* logo: open book with sparkles (replaces the flower) */
:root, :root[data-theme] { --brand-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 489 489%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M73.3 479.1C72.3 478.0 70.2 474.1 68.6 470.3C58.0 445.6 35.6 403.1 19.6 377.7C14.7 369.8 11.0 362.9 11.0 361.4C11.0 357.3 14.8 354.4 22.2 353.0C28.7 351.7 28.9 351.6 30.3 347.6C33.0 340.4 33.9 336.7 35.4 328.1C36.3 322.7 37.5 319.1 38.7 318.0C39.7 317.0 45.0 315.2 50.5 314.0C56.0 312.8 67.4 309.5 75.8 306.8C89.9 302.3 91.1 301.7 90.7 299.8C90.4 298.6 85.3 276.4 79.4 250.4C72.6 220.0 69.0 202.2 69.4 200.6C70.3 197.0 74.2 194.7 78.0 195.5C80.3 196.0 82.1 197.7 85.2 202.2C96.9 219.6 118.5 235.1 137.5 240.0C141.7 241.1 151.9 242.4 160.3 243.0C168.6 243.6 180.2 244.7 186.0 245.5C213.2 249.3 230.3 258.2 240.8 274.0L244.8 280.0L247.6 275.2C252.3 267.1 261.0 259.5 271.3 254.6C283.0 248.9 293.4 246.4 313.5 244.5C345.2 241.5 349.2 241.0 356.8 238.4C372.6 233.2 388.4 221.8 399.8 207.5C403.3 203.1 406.8 198.7 407.6 197.8C411.3 193.1 419.2 195.6 419.8 201.7C420.0 204.0 400.9 291.9 398.4 300.1C398.0 301.5 400.5 302.6 411.7 306.3C419.3 308.8 430.7 312.0 437.0 313.5C450.8 316.8 452.5 318.1 453.5 325.7C454.4 332.7 457.6 345.4 459.5 349.0C460.6 351.2 462.1 352.0 467.0 353.0C470.4 353.7 474.2 355.2 475.6 356.2C479.8 359.6 478.9 362.8 469.2 378.4C453.3 403.7 434.2 439.9 420.3 470.7C415.0 482.7 415.0 482.6 397.2 476.6C364.7 465.7 327.6 460.0 288.4 460.0L274.3 460.0L273.6 463.8C272.9 468.8 271.1 470.2 262.1 473.4C248.3 478.4 232.6 477.4 220.6 470.7C217.1 468.8 216.4 467.8 215.6 464.1L214.7 459.7L192.6 460.3C148.3 461.6 112.8 467.7 86.8 478.6C79.9 481.5 75.7 481.6 73.3 479.1ZM97.8 459.0C125.2 450.4 165.2 445.1 202.8 445.0L215.1 445.0L214.5 420.2C214.2 406.6 213.7 393.1 213.5 390.2C212.9 384.5 214.6 379.7 217.5 378.6C220.5 377.5 223.6 378.0 225.7 379.9C228.4 382.5 228.8 387.0 229.6 426.9L230.3 458.2L233.6 459.6C238.9 461.8 245.1 462.3 251.1 461.1C254.1 460.5 257.0 459.6 257.7 459.2C258.5 458.7 259.1 447.1 259.9 420.5L261.0 382.5L263.6 380.2C266.9 377.3 270.5 377.4 273.6 380.5L276.1 383.0L275.5 405.2C275.2 417.5 274.7 431.4 274.5 436.1L274.0 444.7L296.2 445.3C337.2 446.4 367.6 450.9 394.5 459.8C400.6 461.8 405.9 463.5 406.3 463.5C406.8 463.5 411.3 454.7 416.4 444.0C427.0 421.7 436.3 404.1 449.2 382.2C454.2 373.8 458.1 366.8 457.9 366.6C457.7 366.3 448.7 364.4 438.0 362.2C382.7 350.8 337.7 348.5 292.2 354.7C278.4 356.6 279.0 356.2 276.5 365.6C275.7 368.8 274.2 372.2 273.2 373.2C271.0 375.4 255.4 378.0 244.5 378.0C240.1 378.0 232.2 377.3 227.0 376.5C216.1 374.8 213.7 373.0 212.6 366.0C211.2 357.0 210.6 356.6 196.8 354.7C151.6 348.4 106.4 350.8 51.0 362.2C40.3 364.4 31.3 366.3 31.1 366.5C30.9 366.7 34.3 372.9 38.7 380.2C52.5 403.3 69.9 436.4 79.4 457.8C81.3 462.3 82.6 464.0 83.6 463.6C84.4 463.3 90.8 461.2 97.8 459.0ZM260.8 361.1C261.8 360.6 263.2 358.2 263.9 355.8C266.4 347.4 272.4 337.6 279.1 330.9C286.7 323.2 297.8 317.2 310.5 313.9C319.8 311.5 342.1 310.3 357.5 311.5C366.6 312.2 367.6 312.4 370.3 315.1C372.6 317.5 373.1 318.6 372.5 320.8C371.0 327.0 370.8 327.0 348.1 326.3C330.8 325.8 326.1 326.0 319.0 327.4C310.7 329.1 298.4 334.1 294.5 337.5C292.6 339.1 292.7 339.1 297.1 338.6C337.8 333.9 380.0 335.9 428.3 344.6C436.0 346.0 442.3 347.0 442.5 346.8C442.7 346.6 441.9 342.7 440.8 338.0L438.8 329.4L429.7 327.1C417.0 323.8 395.4 316.4 377.5 309.2C358.9 301.7 350.2 299.8 334.5 299.8C310.5 299.8 289.5 307.4 272.5 322.1C265.0 328.6 261.9 329.4 258.2 326.0C256.7 324.6 256.0 322.7 256.0 320.4C256.0 317.4 256.8 316.0 260.8 312.4C281.4 293.1 314.7 282.2 344.2 285.0C356.1 286.2 363.8 287.9 375.3 292.0C380.1 293.8 384.2 295.1 384.4 294.9C384.6 294.7 387.7 281.0 391.4 264.5C395.1 248.0 398.4 233.7 398.6 232.7C399.0 231.6 396.9 232.7 392.6 235.9C372.6 251.1 360.5 255.2 327.5 258.1C300.1 260.5 288.3 262.7 278.6 267.3C262.1 275.1 254.5 288.4 252.4 312.8C251.6 322.6 250.0 325.3 245.0 325.3C239.8 325.3 237.0 321.4 237.0 314.0C237.0 298.6 231.4 283.5 222.6 275.2C211.4 264.6 197.3 260.7 160.5 258.0C152.2 257.3 142.1 256.2 138.0 255.3C123.4 252.4 109.0 245.5 96.9 235.8C93.7 233.1 91.0 231.4 91.0 231.9C91.0 232.4 94.2 246.7 98.0 263.9C101.9 281.0 105.0 295.1 105.0 295.3C105.0 295.5 108.7 294.2 113.3 292.4C131.6 285.1 157.9 282.8 177.5 286.9C196.7 290.9 215.5 300.1 227.6 311.5C234.9 318.3 235.7 321.4 231.5 325.5C227.7 329.4 225.1 328.7 216.4 321.4C207.5 314.0 192.8 306.3 181.0 302.9C175.6 301.4 169.6 300.6 159.4 300.3C139.0 299.5 131.0 301.2 105.5 311.8C92.0 317.3 73.0 323.8 59.6 327.3L50.6 329.7L48.9 337.6C47.9 341.9 47.1 345.9 47.1 346.4C47.0 346.9 48.5 347.0 50.3 346.6C100.2 336.5 150.4 333.7 192.9 338.6L197.5 339.1L192.0 335.5C189.0 333.6 182.9 330.7 178.5 329.2C170.7 326.6 170.0 326.5 145.9 326.5C123.0 326.5 121.1 326.4 119.1 324.6C116.5 322.3 116.4 318.0 118.8 315.0C121.3 311.9 132.6 310.7 153.5 311.3C173.2 311.9 183.1 313.9 195.0 319.8C209.2 326.8 221.5 341.5 226.1 356.7C227.2 360.5 227.7 361.0 230.9 361.6C232.9 361.9 235.2 362.3 236.0 362.5C238.9 363.3 258.9 362.1 260.8 361.1ZM447.6 271.6C432.3 265.9 429.6 245.9 442.9 236.5C446.6 233.9 448.0 233.5 453.8 233.5C464.1 233.5 470.5 238.3 473.1 248.1C477.0 262.8 461.8 276.8 447.6 271.6ZM457.5 256.0C461.0 252.1 457.2 246.9 452.0 248.5C449.2 249.4 448.3 253.6 450.5 256.0C451.5 257.1 453.1 258.0 454.0 258.0C454.9 258.0 456.5 257.1 457.5 256.0ZM267.4 246.7C264.8 244.5 264.6 243.7 264.8 238.5C265.5 222.3 273.9 211.3 297.6 195.5C311.4 186.3 318.6 179.5 322.0 172.5C324.0 168.3 324.4 166.0 324.4 158.5C324.3 148.5 323.0 144.3 317.8 138.5C307.8 127.1 293.1 128.9 287.5 142.4C284.6 149.3 288.3 157.1 296.3 161.1C302.5 164.2 304.0 165.9 304.0 169.7C304.0 179.8 292.5 179.2 281.0 168.4C264.9 153.3 270.1 128.0 291.2 118.5C296.3 116.2 298.3 115.8 304.4 116.2C332.5 117.6 348.7 152.0 334.6 180.5C330.1 189.7 323.6 195.8 305.6 208.0C286.5 220.9 281.1 227.4 279.5 239.7C278.8 245.2 277.1 247.4 272.9 248.5C270.9 249.0 269.6 248.5 267.4 246.7ZM145.0 215.3C138.7 213.0 138.3 206.8 143.9 200.7L147.8 196.5L143.9 192.1C138.5 186.1 138.7 180.9 144.4 178.5C148.4 176.8 151.6 178.0 155.7 182.7L158.8 186.4L163.4 182.2C168.7 177.3 172.5 176.7 175.8 180.3C179.2 183.9 178.6 187.4 173.8 192.6L169.7 197.1L173.5 201.0C178.3 205.9 178.9 211.1 175.1 214.1C171.5 217.0 168.4 216.4 163.6 212.0C161.2 209.8 158.9 208.0 158.4 208.0C158.0 208.0 156.0 209.5 154.0 211.4C150.3 215.0 147.5 216.2 145.0 215.3ZM244.9 214.8C242.2 213.9 241.5 212.7 238.6 203.6C235.0 192.4 225.4 182.1 212.7 175.7C208.8 173.7 196.9 168.8 186.4 164.7C162.2 155.4 153.7 150.6 143.9 141.0C135.3 132.4 130.3 123.6 126.9 110.5C124.0 99.7 123.7 76.6 126.3 67.0C130.6 50.8 141.1 37.1 154.2 30.6C186.7 14.3 221.9 38.7 222.0 77.6C222.0 85.8 220.5 88.0 214.8 88.0C209.6 88.0 208.0 85.6 207.0 75.9C205.0 55.9 195.3 43.5 179.9 41.1C169.5 39.4 159.0 43.1 151.5 51.1C142.8 60.4 139.5 70.4 139.6 87.5C139.7 107.7 144.3 120.4 155.2 131.1C162.4 138.2 171.7 143.1 194.7 151.9C221.9 162.3 230.3 167.1 240.5 178.1C249.3 187.7 256.6 204.6 254.5 210.7C253.3 214.1 248.6 216.1 244.9 214.8ZM394.6 177.8C392.4 175.9 391.7 174.2 391.0 169.0C389.2 154.9 384.1 149.2 371.2 146.9C363.1 145.4 361.0 143.8 361.0 139.1C361.0 134.2 363.1 132.3 369.9 131.0C384.1 128.3 390.4 117.6 393.6 90.5C395.0 79.1 395.5 77.2 397.7 75.2C400.8 72.4 404.5 72.4 407.4 75.3C409.5 77.4 409.7 78.8 410.3 91.0C411.2 111.2 415.0 123.4 422.0 129.3C424.9 131.8 430.6 134.0 434.2 134.0C436.0 134.0 440.0 138.5 440.0 140.6C440.0 145.3 435.6 149.0 429.9 149.0C424.6 149.0 418.3 151.1 414.8 154.1C410.5 157.6 408.2 162.1 406.9 169.9C405.7 176.2 404.1 178.4 399.9 179.5C398.0 180.0 396.6 179.5 394.6 177.8ZM405.2 142.6C409.8 138.4 409.8 138.3 408.0 136.4C406.9 135.4 404.8 132.1 403.1 129.1C400.6 124.5 400.1 124.0 399.5 125.9C399.2 127.0 397.1 130.2 394.9 133.0L391.0 137.9L395.3 142.4C397.6 144.9 399.7 146.9 400.0 146.9C400.3 146.9 402.6 145.0 405.2 142.6ZM244.3 140.0C241.2 138.7 240.0 135.9 240.0 129.6L240.0 124.0L234.0 124.0C226.8 124.0 224.0 121.9 224.0 116.6C224.0 111.6 227.7 109.0 234.6 109.0L240.0 109.0L240.0 103.5C240.0 98.9 240.4 97.5 242.5 95.5C245.6 92.3 249.4 92.3 252.5 95.5C254.6 97.5 255.0 98.9 255.0 103.5L255.0 109.0L258.9 109.0C266.9 109.0 271.0 111.9 271.0 117.4C271.0 121.9 267.8 124.0 261.0 124.0L255.0 124.0L255.0 129.4C255.0 133.7 254.5 135.4 252.8 137.4C250.1 140.3 247.3 141.2 244.3 140.0ZM79.5 123.5C75.3 121.6 73.7 120.1 70.6 115.6C65.4 107.8 67.7 95.3 75.6 89.3C78.6 87.1 80.5 86.5 86.0 86.2C94.4 85.7 99.7 88.1 103.7 94.2C106.1 97.8 106.5 99.4 106.5 105.6C106.5 112.2 106.2 113.2 103.4 116.7C97.3 124.3 87.3 127.2 79.5 123.5ZM91.3 107.9C92.7 105.7 91.4 101.3 89.2 100.8C85.8 99.9 83.0 101.7 83.0 104.8C83.0 106.3 83.6 108.2 84.2 108.8C85.9 110.5 90.0 109.9 91.3 107.9ZM287.1 87.1C285.9 85.9 284.8 82.5 284.0 78.1C281.8 65.0 274.5 57.9 261.7 56.4C254.3 55.5 251.6 53.5 251.6 48.5C251.6 43.6 254.2 41.5 261.3 40.7C275.0 39.0 281.7 32.7 283.9 19.2C284.4 15.8 285.4 12.2 286.0 11.1C288.1 7.1 295.9 7.1 298.0 11.1C298.6 12.2 299.5 15.7 300.0 18.8C302.2 31.9 308.4 38.2 321.5 40.5C330.8 42.1 333.6 44.3 332.6 49.5C331.8 53.7 329.0 55.6 322.9 56.3C309.6 57.9 301.9 65.4 300.1 78.5C299.3 83.7 298.5 86.0 296.9 87.2C294.1 89.5 289.5 89.5 287.1 87.1ZM296.3 52.2L300.0 48.4L296.0 44.5L292.0 40.6L288.0 44.5L284.0 48.4L287.7 52.2C289.7 54.3 291.7 56.0 292.0 56.0C292.3 56.0 294.3 54.3 296.3 52.2Z%22/%3E%3C/svg%3E"); }
.brand::before { width: 34px; height: 34px; margin-right: 10px; }
@media (max-width: 480px) { .brand::before { width: 28px; height: 28px; margin-right: 8px; } }


/* ===================== PHONES & TABLETS ===================== */
html { -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: transparent; }
body.locked { overflow: hidden; }
.sb-head, .sb-foot, .filt-btn, .lbl-short { display: none; }
.filt-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11.5px; font-weight: 700; }
.filt-n[hidden] { display: none; }
@media (hover: none) { .card:hover, .card.blurb:hover { transform: none; box-shadow: var(--shadow); } }

@media (max-width: 860px) {
  /* header: one compact row + search */
  .top { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand actions" "search search"; gap: 10px 10px;
    padding: calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)); }
  .brand { grid-area: brand; font-size: 23px; }
  .top-actions { grid-area: actions; gap: 6px; margin: 0; }
  .search { grid-area: search; order: 0 !important; max-width: none; }
  .search input { font-size: 16px; padding: 11px 16px; }
  .search-btn { padding: 10px 16px; }
  .lbl-long { display: none; } .lbl-short { display: inline; }
  #themeName { display: none; }
  .theme-btn { padding: 6px 9px !important; }
  .theme-btn .sw { width: 20px; height: 20px; }
  #openSources { padding: 7px 14px; }

  /* sticky toolbar with Filters button */
  .layout { min-height: auto; }
  .main { padding: 0 12px calc(60px + env(safe-area-inset-bottom)); }
  .toolbar { position: sticky; top: 0; z-index: 15; margin: 0 -12px 12px; padding: 10px 12px; flex-wrap: wrap; gap: 8px 10px;
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .count { font-size: 19px; order: 1; }
  .tools { order: 2; margin-left: auto; gap: 6px; }
  .active-filters { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .active-filters:empty { display: none; }
  .active-filters::-webkit-scrollbar { display: none; }
  .fchip { flex: none; }
  .filt-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 14px; }
  .tools select { max-width: 150px; font-size: 14px; padding: 7px 12px; }
  .seg button { padding: 6px 10px; }

  /* filters = bottom sheet */
  .sidebar { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; height: 88vh !important; height: 88dvh !important;
    z-index: 60 !important; border: 0; border-radius: 22px 22px 0 0; background: var(--panel) !important; padding: 0 !important;
    display: flex; flex-direction: column; transform: translateY(105%) !important; transition: transform .25s ease, box-shadow .25s; box-shadow: none; overflow: hidden; }
  .sidebar.open { transform: none !important; box-shadow: 0 0 0 100vmax rgba(20,10,15,.42) !important; }
  body.sb-open .layout { z-index: 50; }
  .sb-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); position: relative; }
  .sb-head b { font: 600 italic 19px var(--serif); flex: 1; }
  .sb-grab { position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--line); }
  .sb-head .icon-btn { width: 38px; height: 38px; }
  .sb-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px 20px; overscroll-behavior: contain; }
  .sb-foot { display: flex; gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
  .sb-foot .btn { flex: 1; min-height: 46px; font-size: 15px; justify-content: center; }
  .sb-foot .btn.primary { flex: 2; }
  .shelves { display: flex; flex-wrap: wrap; gap: 6px; }
  .shelves a { flex: none; padding: 8px 14px; border: 1px solid var(--line); gap: 8px; }
  .shelves a .n { font-size: 12px; }
  .frow { padding: 9px 6px; font-size: 15px; grid-template-columns: 26px 1fr auto 34px; }
  .fbtn { width: 26px; height: 26px; font-size: 13px; }
  .fbtn.exc-btn { width: 34px; height: 34px; opacity: .55; }
  .facet h4 { font-size: 12px; padding: 6px; }
  .facet input[data-fsearch] { font-size: 16px; padding: 9px 12px; }

  /* fic boxes */
  .cards { gap: 12px; }
  .card.blurb { padding: 15px 15px 11px; border-radius: 16px; }
  .b-head { gap: 12px; }
  .b-summary { -webkit-line-clamp: 4; font-size: 15px; }
  .b-tags li, .b-fandoms li { font-size: 14px; }
  .b-stats { justify-content: flex-start; }

  /* details = full-screen page with actions in reach */
  .drawer { width: 100vw; border: 0; padding-bottom: env(safe-area-inset-bottom); }
  .drawer .d-head { padding: calc(16px + env(safe-area-inset-top)) 18px 14px; }
  .drawer .d-head h2 { font-size: 25px; padding-right: 44px; }
  .d-close { top: calc(10px + env(safe-area-inset-top)) !important; right: 10px !important; width: 42px !important; height: 42px !important; font-size: 18px; }
  .drawer .d-body { padding: 18px 18px 40px; }
  .d-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .d-actions .btn.primary { grid-column: 1 / -1; min-height: 48px; justify-content: center; font-size: 16px; }
  .d-actions .btn, .d-actions .shelf-sel { justify-content: center; width: 100%; min-width: 0; }
  .stats { grid-template-columns: 1fr 1fr; }

  /* popups = bottom sheets */
  .modal { display: flex !important; align-items: flex-end; padding: 0 !important; }
  .modal[hidden] { display: none !important; }
  .modal-card { width: 100% !important; max-height: 92vh; max-height: 92dvh; overflow-y: auto; border-radius: 22px 22px 0 0; margin: 0;
    padding: 18px 18px calc(22px + env(safe-area-inset-bottom)) !important; }
  .modal-head h2 { font-size: 21px; padding-right: 8px; }
  .add-source input, .settings input, .settings select, .reader-find input { font-size: 16px !important; }
  .add-source input { padding: 12px 14px; }
  .add-source .btn { padding: 10px 18px; }
  .theme-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 85vh; overflow-y: auto; z-index: 80; border-radius: 22px 22px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); color: var(--ink); box-shadow: 0 0 0 100vmax rgba(20,10,15,.42); }
  .theme-opt { padding: 10px; }

  /* reader: bar floats over the text, hides while you read, tap to bring back */
  .reader { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .reader-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 4; padding-top: calc(8px + env(safe-area-inset-top)); transition: transform .22s ease; }
  .reader.bar-hidden .reader-bar { transform: translateY(-105%); }
  .reader-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 3px; padding-bottom: env(safe-area-inset-bottom); }
  .reader-scroll { padding-top: var(--rbar-h, 104px); }
  .book { padding: 18px 20px calc(90px + env(safe-area-inset-bottom)); }
  .reader[data-rw="narrow"] .book, .reader[data-rw="wide"] .book, .reader[data-rw="full"] .book { max-width: none; }
  .aa-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; width: 100%; border-radius: 22px 22px 0 0; max-height: 80vh; overflow-y: auto;
    padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .aa-pop .aa-row:has([data-set="rw"]) { display: none; }
  .pdf-page { margin-bottom: 10px; border-radius: 4px; }
  .foot { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .brand { font-size: 21px; } .brand::before { width: 26px; height: 26px; }
  .tools select { max-width: 124px; }
  .seg[aria-label="View"] { display: none; }
}

/* let the page (not <body>) scroll, so sticky bars and scroll-to-top work everywhere */
html, body { height: auto !important; overflow-x: clip !important; }
.b-tags .more-tags { white-space: nowrap; }
body > .theme-pop { position: fixed; top: 64px; right: 16px; z-index: 80; color: var(--ink); }
@media (max-width: 860px) { body > .theme-pop { top: auto; right: 0; } }
@media (max-width: 480px) { .seg[aria-label="View"] { display: none; } .tools select { max-width: 170px; } .toolbar { flex-wrap: nowrap; } .active-filters { order: 4; } .toolbar:has(.fchip) { flex-wrap: wrap; } }

.toast { border-radius: 14px !important; max-width: min(440px, calc(100vw - 32px)); width: max-content; padding: 12px 18px; text-align: center; line-height: 1.45; font-size: 14px;
  bottom: calc(20px + env(safe-area-inset-bottom)); }


/* ===================== notifications ===================== */
.toast { display: none !important; }
.toasts { position: fixed; z-index: 120; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.toast-item { pointer-events: auto; display: grid; grid-template-columns: 26px 1fr 28px; align-items: start; gap: 10px; padding: 12px 10px 12px 14px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20,10,15,.18); font: 14px/1.45 var(--ui); opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s; }
.toast-item.in { opacity: 1; transform: none; } .toast-item.out { opacity: 0; transform: translateY(8px); }
.toast-item .t-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--ui); color: #fff; background: var(--accent); }
.toast-item.error { border-left-color: #c0392b; } .toast-item.error .t-ico { background: #c0392b; }
.toast-item.success { border-left-color: #2f9e6e; } .toast-item.success .t-ico { background: #2f9e6e; }
.toast-item .t-msg { padding-top: 2px; overflow-wrap: anywhere; }
.toast-item .t-x { border: 0; background: none; color: var(--ink-3); cursor: pointer; width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
.toast-item .t-x:hover { background: var(--panel-2); color: var(--ink); }

/* ===================== dialogs ===================== */
.dlg-wrap { position: fixed; inset: 0; z-index: 130; background: rgba(20,10,15,.45); display: grid; place-items: center; padding: 16px; animation: fadeIn .15s; }
.dlg { background: var(--panel); color: var(--ink); width: min(400px, 100%); border-radius: 18px; padding: 20px 20px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dlg h3 { margin: 0 0 6px; font: 600 20px/1.3 var(--serif); }
.dlg p { margin: 0 0 18px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.dlg-btns { display: flex; gap: 8px; justify-content: flex-end; }
.dlg-btns .btn { min-height: 42px; padding: 8px 18px; }
.btn.danger-solid { background: #c0392b; border-color: #c0392b; color: #fff; font-weight: 600; }
@keyframes fadeIn { from { opacity: 0; } }
@media (max-width: 860px) { .dlg-wrap { place-items: end center; padding: 0; } .dlg { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); } .dlg-btns .btn { flex: 1; } }

/* ===================== error / offline / no-js states ===================== */
.loading.err { display: grid; justify-items: center; gap: 8px; text-align: center; font-family: var(--ui); }
.loading.err b { font: 600 20px var(--serif); } .loading.err span { max-width: 420px; opacity: .85; } .loading.err .btn { margin-top: 8px; }
.offline-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 110; padding: calc(6px + env(safe-area-inset-top)) 14px 6px; text-align: center; font: 600 13px var(--ui); background: #3b2a33; color: #fff; }
.nojs { padding: 40px 20px; text-align: center; font: 16px var(--ui); }

/* ===================== accessibility basics ===================== */
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-radius: 6px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* readable secondary text (WCAG AA 4.5:1) */
:root, :root[data-theme="ruby"] { --ink-3: #7d6168; }
:root[data-theme="blossom"] { --ink-3: #86617f; }
:root[data-theme="matcha"] { --ink-3: #58695f; }
:root[data-theme="sunset"] { --ink-3: #86563f; }
:root[data-theme="peony"] { --ink-3: #5f6773; }
.sq-s { background: var(--ink-2) !important; }


/* ================= Lemon Breeze (light) ================= */
:root[data-theme="lemon"] {
  color-scheme: light;
  --bg: #eef8fb; --panel: #ffffff; --panel-2: #e3f3f8; --ink: #20373B; --ink-2: #3c5a60; --ink-3: #4f6d73;
  --line: #cde5ed; --accent: #2f7d8c; --accent-2: #FFC64F; --accent-ink: #ffffff; --accent-soft: #dcf0f5; --chip: #e8f5f9;
  --grad: linear-gradient(135deg, #20373B 0%, #2f7d8c 55%, #519CAB 100%); --grad-2: linear-gradient(90deg, #519CAB, #FFC64F, #519CAB);
  --shadow: 0 1px 2px rgba(32,55,59,.06), 0 8px 24px rgba(32,55,59,.08);
  --c-char-bg: #fff1cc; --c-char: #7a5600; --c-tag-bg: #e3f3f8; --c-tag: #2d5a62;
  --c-rel-bg: #dcf0f5; --c-rel: #22677a; --c-fan-bg: #e7eef0; --c-fan: #20373B; --c-warn-bg: #fff1cc; --c-warn: #7a5600;
  --blob1: rgba(81,156,171,.22); --blob2: rgba(255,198,79,.30); --blob3: rgba(194,231,241,.65);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='0.22'%3E%3Cg transform='translate%2845 55%29 rotate%28-20%29 scale%281%29'%3E%3Cellipse rx='13' ry='10' fill='%23FFC64F'/%3E%3Ccircle cx='13' cy='0' r='2.4' fill='%23FFC64F'/%3E%3Cpath d='M-6 -14 q8 -6 14 2 q-8 4 -14 -2z' fill='%23519CAB'/%3E%3C/g%3E%3Cg transform='translate%28165 150%29 rotate%2825%29 scale%280.75%29'%3E%3Cellipse rx='13' ry='10' fill='%23FFC64F'/%3E%3Ccircle cx='13' cy='0' r='2.4' fill='%23FFC64F'/%3E%3Cpath d='M-6 -14 q8 -6 14 2 q-8 4 -14 -2z' fill='%23519CAB'/%3E%3C/g%3E%3Cg transform='translate%28160 45%29 scale%280.5%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%23519CAB'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%23519CAB'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%23519CAB'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%23519CAB'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%23519CAB'/%3E%3Ccircle r='4' fill='%23FFC64F'/%3E%3C/g%3E%3Ccircle cx='95' cy='120' r='3' fill='%23519CAB'/%3E%3Ccircle cx='40' cy='180' r='2.5' fill='%23FFC64F'/%3E%3C/g%3E%3C/svg%3E");
  --r-paper: #fbfdfe; --r-paper-ink: #20373B; --r-night: #14262a; --r-night-ink: #e3f1f4; --hl: #FFC64F;
}
:root[data-theme="lemon"] .brand span { background-image: linear-gradient(90deg, #2f7d8c, #d99a10, #2f7d8c); }
:root[data-theme="lemon"] .rating { background: linear-gradient(135deg, #20373B, #519CAB) !important; }

/* ================= Midnight Steel (dark) ================= */
:root[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #06141B; --panel: #11212D; --panel-2: #182b38; --ink: #e8ecec; --ink-2: #CCD0CF; --ink-3: #9BA8AB;
  --line: #253745; --accent: #aebcc0; --accent-2: #4A5C6A; --accent-ink: #06141B; --accent-soft: #223644; --chip: #1a2d3a;
  --grad: linear-gradient(135deg, #CCD0CF 0%, #9BA8AB 55%, #4A5C6A 100%); --grad-2: linear-gradient(90deg, #4A5C6A, #CCD0CF, #4A5C6A);
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
  --c-char-bg: #223644; --c-char: #d3dee3; --c-tag-bg: #182b38; --c-tag: #CCD0CF;
  --c-rel-bg: #2b4252; --c-rel: #eef3f4; --c-fan-bg: #172833; --c-fan: #b9c6ca; --c-warn-bg: #3a3420; --c-warn: #f0d999;
  --blob1: rgba(74,92,106,.38); --blob2: rgba(155,168,171,.10); --blob3: rgba(37,55,69,.55);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='0.2'%3E%3Cpath transform='translate%2850 50%29 scale%281%29' d='M0 -14 C2 -4 4 -2 14 0 C4 2 2 4 0 14 C-2 4 -4 2 -14 0 C-4 -2 -2 -4 0 -14Z' fill='%239BA8AB'/%3E%3Cpath transform='translate%28160 140%29 scale%280.6%29' d='M0 -14 C2 -4 4 -2 14 0 C4 2 2 4 0 14 C-2 4 -4 2 -14 0 C-4 -2 -2 -4 0 -14Z' fill='%23CCD0CF'/%3E%3Cpath transform='translate%28170 40%29 scale%280.35%29' d='M0 -14 C2 -4 4 -2 14 0 C4 2 2 4 0 14 C-2 4 -4 2 -14 0 C-4 -2 -2 -4 0 -14Z' fill='%239BA8AB'/%3E%3Ccircle cx='100' cy='100' r='1.6' fill='%23CCD0CF'/%3E%3Ccircle cx='40' cy='170' r='1.2' fill='%239BA8AB'/%3E%3Ccircle cx='200' cy='190' r='1.4' fill='%23CCD0CF'/%3E%3Ccircle cx='130' cy='30' r='1' fill='%23CCD0CF'/%3E%3C/g%3E%3C/svg%3E");
  --r-paper: #eef1f1; --r-paper-ink: #11212D; --r-night: #0a1820; --r-night-ink: #d6dcdc; --hl: #CCD0CF;
}
:root[data-theme="midnight"] .brand span { background-image: linear-gradient(90deg, #9BA8AB, #ffffff, #9BA8AB); }
:root[data-theme="midnight"] .card, :root[data-theme="midnight"] .card.blurb { border-color: #22364a; }
:root[data-theme="midnight"] .sq-r, :root[data-theme="midnight"] .sq-c, :root[data-theme="midnight"] .sq-w, :root[data-theme="midnight"] .sq-s { color: #06141B; }
:root[data-theme="midnight"] .sq-r { background: #CCD0CF; } :root[data-theme="midnight"] .sq-c { background: #9BA8AB; }
:root[data-theme="midnight"] .sq-w { background: #7f8f95 !important; } :root[data-theme="midnight"] .sq-s { background: #aebcc0 !important; }
:root[data-theme="midnight"] select.btn, :root[data-theme="midnight"] .tools select, :root[data-theme="midnight"] .settings select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23CCD0CF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-theme="midnight"] .toast-item, :root[data-theme="lavender"] .toast-item { box-shadow: 0 10px 30px rgba(0,0,0,.45); }
:root[data-theme="midnight"] .b-title h3, :root[data-theme="midnight"] .card h3 { color: #f1f4f4; }
:root[data-theme="midnight"] .count { background-image: linear-gradient(90deg, #CCD0CF, #ffffff); }
:root[data-theme="lemon"] .b-title h3 { color: #20373B; }

/* ===================== first-time guide ===================== */
.empty.guide { max-width: 760px; margin: 40px auto 56px; padding: 0 8px; text-align: center; background: none; border: 0; box-shadow: none; color: var(--ink-2); }
.g-icon { width: 64px; height: 64px; margin: 0 auto 14px; background: var(--grad); -webkit-mask: var(--brand-mask) center/contain no-repeat; mask: var(--brand-mask) center/contain no-repeat; }
.guide h2 { margin: 0; font: 600 italic 30px/1.2 var(--serif); color: var(--ink); }
.guide .g-lead { margin: 10px auto 32px; max-width: 420px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.g-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
.g-steps li { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 18px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.g-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--accent-ink); font: 700 14px var(--ui); margin-bottom: 6px; }
.g-steps b { font: 600 17px/1.3 var(--serif); color: var(--ink); }
.g-steps p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.g-cta { display: inline-flex; margin: 32px auto 0; min-height: 48px; padding: 12px 28px; font-size: 16px; }
.g-help { margin: 22px auto 0; max-width: 480px; font-size: 14px; }
.g-help summary { cursor: pointer; display: inline-block; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.g-help summary::-webkit-details-marker { display: none; }
.g-help-body { margin-top: 12px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-align: left; line-height: 1.6; }
.g-help-body p { margin: 0; }
.g-note { margin-top: 8px !important; font-size: 13px; color: var(--ink-3); }
.g-foot { margin: 20px 0 0; font-size: 13px; color: var(--ink-3); }
@media (max-width: 860px) {
  .empty.guide { margin: 18px auto 36px; padding: 0 2px; }
  .g-icon { width: 52px; height: 52px; }
  .guide h2 { font-size: 25px; }
  .guide .g-lead { margin: 8px auto 22px; font-size: 15px; }
  .g-steps { grid-template-columns: 1fr; gap: 10px; }
  .g-steps li { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; row-gap: 2px; padding: 14px 16px; align-items: start; }
  .g-n { grid-row: span 2; margin: 0; }
  .g-cta { display: flex; width: 100%; justify-content: center; margin-top: 22px; }
}

/* scan progress banner */
.scan-banner { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 12px 16px; border-radius: 14px; }
.scan-banner .sb-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scan-banner .sb-txt strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-banner .sb-txt .muted { font-size: 13px; }
.scan-banner .btn { padding: 6px 16px; font-size: 13px; }
.scan-banner .bar { grid-column: 1 / -1; }
/* loading fic boxes */
.card.blurb:has(.skel) { opacity: .85; }
.card.blurb:has(.skel) h3 { color: var(--ink-3) !important; font-weight: 500; }
.skel { display: grid; gap: 8px; margin-top: 12px; }
.skel i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--panel-2) 25%, color-mix(in srgb, var(--panel-2) 55%, var(--panel)) 50%, var(--panel-2) 75%); background-size: 200% 100%; animation: shimmer-sk 1.3s linear infinite; }
.skel i.s { width: 55%; }
@keyframes shimmer-sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.b-pending.err { color: var(--r-e); }

.loading-now { display: flex; align-items: center; gap: 10px; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ================= Bryn's Forest (dark) ================= */
:root[data-theme="bryn"] {
  color-scheme: dark;
  --bg: #101212; --panel: #1a2519; --panel-2: #22301f; --ink: #efe6d6; --ink-2: #cfc4ae; --ink-3: #a59b86;
  --line: #2e3d27; --accent: #a9bf7a; --accent-2: #c0895f; --accent-ink: #101212; --accent-soft: #2b3a24; --chip: #22301f;
  --grad: linear-gradient(135deg, #a9bf7a 0%, #7d9a52 45%, #b98258 100%); --grad-2: linear-gradient(90deg, #7d9a52, #c0895f, #7d9a52);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
  --c-char-bg: #2b3a24; --c-char: #cfe0a8; --c-tag-bg: #35261f; --c-tag: #e3c3a6;
  --c-rel-bg: #3f2c22; --c-rel: #f0c9a3; --c-fan-bg: #233021; --c-fan: #bcd29a; --c-warn-bg: #3d3420; --c-warn: #f0d999;
  --blob1: rgba(50,68,41,.55); --blob2: rgba(103,71,54,.30); --blob3: rgba(26,37,25,.75);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='.28'%3E%3Cpath transform='translate%2845 55%29 scale%281.1%29' d='M0 -16 L9 -4 L4 -4 L11 6 L3 6 L3 12 L-3 12 L-3 6 L-11 6 L-4 -4 L-9 -4Z' fill='%234f6b3c'/%3E%3Cpath transform='translate%28165 150%29 scale%280.8%29' d='M0 -16 L9 -4 L4 -4 L11 6 L3 6 L3 12 L-3 12 L-3 6 L-11 6 L-4 -4 L-9 -4Z' fill='%234f6b3c'/%3E%3Cpath transform='translate%28150 40%29 rotate%28-20%29 scale%281%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%238a5e43'/%3E%3Cpath transform='translate%2870 165%29 rotate%2815%29 scale%280.9%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%236f8f4a'/%3E%3Ccircle cx='110' cy='105' r='2.4' fill='%23a07454'/%3E%3Ccircle cx='30' cy='190' r='1.6' fill='%236f8f4a'/%3E%3Ccircle cx='200' cy='85' r='1.4' fill='%23a07454'/%3E%3C/g%3E%3C/svg%3E");
  --r-paper: #f3ece0; --r-paper-ink: #1a2519; --r-night: #121614; --r-night-ink: #e6dccb; --hl: #c0895f;
}
:root[data-theme="bryn"] .brand span { background-image: linear-gradient(90deg, #a9bf7a, #e2b48a, #a9bf7a); }
:root[data-theme="bryn"] .top { background: linear-gradient(90deg, #101212, #1a2519 55%, #35261f); border-bottom: 0; }
:root[data-theme="bryn"] .card, :root[data-theme="bryn"] .card.blurb { border-color: #2a3824; }
:root[data-theme="bryn"] .b-title h3, :root[data-theme="bryn"] .card h3 { color: #f3ead9; }
:root[data-theme="bryn"] .count { background-image: linear-gradient(90deg, #a9bf7a, #e2b48a); }
:root[data-theme="bryn"] .sq-r { background: #7d9a52 !important; } :root[data-theme="bryn"] .sq-c { background: #8a5e43 !important; }
:root[data-theme="bryn"] .sq-w { background: #4f5f45 !important; } :root[data-theme="bryn"] .sq-s { background: #674736 !important; }
:root[data-theme="bryn"] select.btn, :root[data-theme="bryn"] .tools select, :root[data-theme="bryn"] .settings select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23cfc4ae' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-theme="bryn"] .toast-item { box-shadow: 0 10px 30px rgba(0,0,0,.5); }
:root[data-theme="bryn"] .reader[data-rt="light"] { --rbg: #f3ece0; --rink: #1a2519; }
:root[data-theme="bryn"] .sq-r { background: #5f7a3c !important; }


/* ================= Bryn's Forest v2: chocolate first, forest green second, cream only as a highlight ================= */
:root[data-theme="bryn"] {
  --bg: #140e0b; --panel: #24170f; --panel-2: #2f1f16; --ink: #ecdccb; --ink-2: #c9ad94; --ink-3: #a88c74;
  --line: #3d2a1e; --accent: #d9a273; --accent-2: #3f5a31; --accent-ink: #f6e9da; --accent-soft: #3a261b; --chip: #2f1f16;
  --grad: linear-gradient(135deg, #6b4430 0%, #4a2e20 100%);
  --grad-2: linear-gradient(90deg, #3f5a31, #8a5a3e 50%, #3f5a31);
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 26px rgba(0,0,0,.45);
  --c-char-bg: #22301d; --c-char: #b9d29a; --c-tag-bg: #38261c; --c-tag: #dcbfa4;
  --c-rel-bg: #4a2e20; --c-rel: #f1c8a0; --c-fan-bg: #1f2a1b; --c-fan: #c7d6ae; --c-warn-bg: #3d3018; --c-warn: #f0d999;
  --blob1: rgba(107,68,48,.35); --blob2: rgba(63,90,49,.22); --blob3: rgba(36,23,15,.8);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='.3'%3E%3Cpath transform='translate%2845 55%29 scale%281.1%29' d='M0 -16 L9 -4 L4 -4 L11 6 L3 6 L3 12 L-3 12 L-3 6 L-11 6 L-4 -4 L-9 -4Z' fill='%233f5a31'/%3E%3Cpath transform='translate%28150 40%29 rotate%28-20%29 scale%281%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%237a4f36'/%3E%3Cpath transform='translate%28165 150%29 rotate%2830%29 scale%281.1%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%236b4430'/%3E%3Cpath transform='translate%2880 170%29 scale%280.7%29' d='M0 -16 L9 -4 L4 -4 L11 6 L3 6 L3 12 L-3 12 L-3 6 L-11 6 L-4 -4 L-9 -4Z' fill='%233f5a31'/%3E%3Ccircle cx='110' cy='105' r='2.4' fill='%238a5a3e'/%3E%3Ccircle cx='200' cy='85' r='1.4' fill='%23c9a27e'/%3E%3Ccircle cx='30' cy='195' r='1.6' fill='%237a4f36'/%3E%3C/g%3E%3C/svg%3E");
  --r-paper: #efe2d0; --r-paper-ink: #2a1a12; --r-night: #160f0c; --r-night-ink: #e6d4c2; --hl: #b07a52;
}
:root[data-theme="bryn"] .top { background: linear-gradient(90deg, #1a120e 0%, #2a1a12 60%, #1f2a1b 100%); }
:root[data-theme="bryn"] .top::after { background: linear-gradient(90deg, #3f5a31, #b07a52, #3f5a31); opacity: .9; }
:root[data-theme="bryn"] .brand span { background-image: linear-gradient(90deg, #e9c7a2, #d9a273, #e9c7a2); }
:root[data-theme="bryn"] .brand::before { background: #d9a273; }
:root[data-theme="bryn"] .card, :root[data-theme="bryn"] .card.blurb { background: #24170f; border-color: #3d2a1e; }
:root[data-theme="bryn"] .card::before { background: linear-gradient(90deg, #3f5a31, #6b4430); }
:root[data-theme="bryn"] .b-title h3, :root[data-theme="bryn"] .card h3 { color: #f1dfcb; }
:root[data-theme="bryn"] .count { background-image: linear-gradient(90deg, #e9c7a2, #d9a273); }
:root[data-theme="bryn"] .btn.primary { background: linear-gradient(135deg, #7a4f36, #4a2e20); color: #f6e9da; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
:root[data-theme="bryn"] .shelves a.on, :root[data-theme="bryn"] .seg button.on, :root[data-theme="bryn"] .fchip { background: linear-gradient(135deg, #6b4430, #4a2e20); color: #f6e9da; }
:root[data-theme="bryn"] .sidebar { background: rgba(26,18,14,.6); }
:root[data-theme="bryn"] .sq-r { background: #6b4430 !important; color: #f6e9da; } :root[data-theme="bryn"] .sq-c { background: #3f5a31 !important; color: #f6e9da; }
:root[data-theme="bryn"] .sq-w { background: #4a3a30 !important; } :root[data-theme="bryn"] .sq-s { background: #5a3a28 !important; }
:root[data-theme="bryn"] .rating { background: linear-gradient(135deg, #7a4f36, #4a2e20) !important; color: #f6e9da; }
:root[data-theme="bryn"] .pbar > div, :root[data-theme="bryn"] .bar > div, :root[data-theme="bryn"] .reader-progress > div { background: linear-gradient(90deg, #3f5a31, #b07a52); }
:root[data-theme="bryn"] .g-n { background: linear-gradient(135deg, #7a4f36, #4a2e20); color: #f6e9da; }
:root[data-theme="bryn"] .g-icon { background: #d9a273; }
:root[data-theme="bryn"] .d-head { background: linear-gradient(180deg, #2f1f16, #24170f); }
:root[data-theme="bryn"] .stat b { color: #d9a273; }
:root[data-theme="bryn"] ::selection { background: rgba(176,122,82,.45); }

/* ================= Bryn's Hollow v3: ~60% forest green, ~40% chocolate ================= */
:root[data-theme="bryn"] {
  --bg: #0f1410; --panel: #1a2519; --panel-2: #22301f; --ink: #ece2d0; --ink-2: #cdbfa8; --ink-3: #a69a84;
  --line: #2f3f28; --accent-soft: #2a3a24; --chip: #22301f;
  --c-char-bg: #24361f; --c-fan-bg: #1f2c1b;
  --blob1: rgba(50,68,41,.45); --blob2: rgba(107,68,48,.28); --blob3: rgba(26,37,25,.7);
}
:root[data-theme="bryn"] .top { background: linear-gradient(90deg, #1a2519 0%, #22301f 55%, #3a2619 100%); }
:root[data-theme="bryn"] .card, :root[data-theme="bryn"] .card.blurb { background: #1a2519; border-color: #2f3f28; }
:root[data-theme="bryn"] .card::before { background: linear-gradient(90deg, #6b4430, #3f5a31); }
:root[data-theme="bryn"] .sidebar { background: rgba(36,25,18,.82); border-color: #3d2a1e; }
:root[data-theme="bryn"] .d-head { background: linear-gradient(180deg, #2a1c14, #1a2519); }
:root[data-theme="bryn"] .drawer { background: #1a2519; }
:root[data-theme="bryn"] .modal-card, :root[data-theme="bryn"] .theme-pop, :root[data-theme="bryn"] .aa-pop { background: #1e2a1c; }
:root[data-theme="bryn"] .stat { background: #24170f; border-color: #3d2a1e; }
:root[data-theme="bryn"] .b-summary { border-image: linear-gradient(#6b4430, #3f5a31) 1; }
:root[data-theme="bryn"] .reader[data-rt="dark"] { --rbg: #111712; --rink: #e6dccb; }
.src.removing { opacity: .45; pointer-events: none; }

.loading-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-top: 4px; border: 1px dashed var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 70%, transparent); color: var(--ink-2); grid-column: 1 / -1; }
.loading-row b { display: block; color: var(--ink); font-size: 14.5px; } .loading-row span:not(.spin) { font-size: 13px; color: var(--ink-3); }

/* delete-download button in the fic drawer */
.d-actions .del-dl { color: var(--ink-soft, inherit); }
.d-actions .del-dl:hover { color: #b3261e; border-color: #b3261e66; background: #b3261e12; }


/* ===== Lilac Daydream: Lavender Haze turned to daylight (light lilac, violet ink) ===== */
:root[data-theme="lilac"] {
  color-scheme: light;
  --bg: #F6F2FC; --panel: #FFFFFF; --panel-2: #EFE8FA; --ink: #2E2440; --ink-2: #54496A; --ink-3: #6f6585;
  --line: #E4D9F5; --accent: #7B5EA7; --accent-2: #B9A6E0; --accent-ink: #ffffff; --accent-soft: #ECE3FA; --chip: #F1EBFB;
  --grad: linear-gradient(135deg, #9D82CC 0%, #7B5EA7 55%, #5C4585 100%); --grad-2: linear-gradient(90deg, #B9A6E0, #7B5EA7, #E0A6C8, #B9A6E0);
  --shadow: 0 1px 2px color-mix(in srgb, #7B5EA7 8%, transparent), 0 8px 24px color-mix(in srgb, #7B5EA7 11%, transparent);
  --c-char-bg: #ECE3FA; --c-char: #5C4585; --c-tag-bg: #F4EEFB; --c-tag: #6a4f8f;
  --c-rel-bg: #F9E3EF; --c-rel: #9b3f72; --c-fan-bg: #E6EAF7; --c-fan: #3f4c7a; --c-warn-bg: #FFF1D6; --c-warn: #7a5a00;
  --blob1: rgba(185,166,224,.45); --blob2: rgba(224,166,200,.25); --blob3: rgba(201,182,234,.40);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='0.22'%3E%3Cg transform='translate%2840 50%29 scale%281%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%23C9B6EA'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%23C9B6EA'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%23C9B6EA'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%23C9B6EA'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%23C9B6EA'/%3E%3Ccircle r='4' fill='%23FFF'/%3E%3C/g%3E%3Cg transform='translate%28160 150%29 scale%280.7%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%239D82CC'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%239D82CC'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%239D82CC'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%239D82CC'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%239D82CC'/%3E%3Ccircle r='4' fill='%23E4D9F5'/%3E%3C/g%3E%3Cg transform='translate%28172 40%29 scale%280.45%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%23E4D9F5'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%23E4D9F5'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%23E4D9F5'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%23E4D9F5'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%23E4D9F5'/%3E%3Ccircle r='4' fill='%239D82CC'/%3E%3C/g%3E%3Cpath transform='translate%2870 160%29 rotate%280%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%23B9A6E0'/%3E%3Cpath transform='translate%28112 82%29 rotate%28-25%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%23CDBDEA'/%3E%3Ccircle cx='100' cy='120' r='2.5' fill='%239D82CC'/%3E%3Ccircle cx='30' cy='190' r='2' fill='%23B9A6E0'/%3E%3C/g%3E%3C/svg%3E");
  --r-paper: #FBF9FE; --r-paper-ink: #2E2440; --r-night: #1f1a2b; --r-night-ink: #e6def3; --hl: #E4D2FF;
}
:root[data-theme="lilac"] .brand span { background-image: linear-gradient(90deg, #7B5EA7, #b07aa6, #7B5EA7); }
:root[data-theme="lilac"] .b-title h3, :root[data-theme="lilac"] .card h3 { color: #3a2c55; }
:root[data-theme="lilac"] .reader[data-rt="sepia"] { --rbg: #f6efe2; --rink: #3a2c45; }

/* ===== Violet Latte: lilac & violet on Peony Latte's vanilla cream ===== */
:root[data-theme="violatte"] {
  color-scheme: light;
  --bg: #FFF7E6; --panel: #FFFCF5; --panel-2: #F7EFFA; --ink: #3A2D4F; --ink-2: #5d5070; --ink-3: #6f6380;
  --line: #EEE2D2; --accent: #8A63B8; --accent-2: #F3D27A; --accent-ink: #ffffff; --accent-soft: #EFE4FA; --chip: #F6EFE9;
  --grad: linear-gradient(135deg, #B596DE 0%, #8A63B8 55%, #5F4387 100%); --grad-2: linear-gradient(90deg, #C9B3E6, #8A63B8, #E6B85C, #C9B3E6);
  --shadow: 0 1px 2px color-mix(in srgb, #8A63B8 8%, transparent), 0 8px 24px color-mix(in srgb, #8A63B8 10%, transparent);
  --c-char-bg: #EFE4FA; --c-char: #5F4387; --c-tag-bg: #FBF0D3; --c-tag: #7d5a10;
  --c-rel-bg: #F7E1EC; --c-rel: #8f3f6b; --c-fan-bg: #EAEFE0; --c-fan: #4d5c32; --c-warn-bg: #FFEFD0; --c-warn: #7a5200;
  --blob1: rgba(201,179,230,.45); --blob2: rgba(243,210,122,.28); --blob3: rgba(183,196,154,.22);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='0.26'%3E%3Cg transform='translate%2840 50%29 scale%281%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%23C9B3E6'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%23C9B3E6'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%23C9B3E6'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%23C9B3E6'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%23C9B3E6'/%3E%3Ccircle r='4' fill='%23F3D27A'/%3E%3C/g%3E%3Cg transform='translate%28160 150%29 scale%280.75%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%238A63B8'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%238A63B8'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%238A63B8'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%238A63B8'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%238A63B8'/%3E%3Ccircle r='4' fill='%23F3E3B8'/%3E%3C/g%3E%3Cg transform='translate%28170 40%29 scale%280.5%29'%3E%3Ccircle cx='0' cy='-9' r='7' fill='%23F3D27A'/%3E%3Ccircle cx='8.5' cy='-2.8' r='7' fill='%23F3D27A'/%3E%3Ccircle cx='5.3' cy='7.3' r='7' fill='%23F3D27A'/%3E%3Ccircle cx='-5.3' cy='7.3' r='7' fill='%23F3D27A'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='7' fill='%23F3D27A'/%3E%3Ccircle r='4' fill='%238A63B8'/%3E%3C/g%3E%3Cpath transform='translate%2870 160%29 rotate%280%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%23B7C49A'/%3E%3Cpath transform='translate%28118 78%29 rotate%28-25%29' d='M0 0 q10 -14 22 -6 q-8 12 -22 6z' fill='%23B7C49A'/%3E%3Ccircle cx='180' cy='95' r='3' fill='%23C9B3E6'/%3E%3Ccircle cx='30' cy='190' r='2' fill='%23F3D27A'/%3E%3C/g%3E%3C/svg%3E");
  --r-paper: #FFFAF0; --r-paper-ink: #33284A; --r-night: #221c2e; --r-night-ink: #efe6dc; --hl: #E7D6FA;
}
:root[data-theme="violatte"] .brand span { background-image: linear-gradient(90deg, #8A63B8, #c9953a, #8A63B8); }
:root[data-theme="violatte"] .b-title h3, :root[data-theme="violatte"] .card h3 { color: #3A2D4F; }

/* source label (which Drive folder / upload a fic came from) */
.src-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--ink-2); }
.src-tag svg { flex: none; opacity: .75; }
.d-src { margin-top: 6px; font-size: 13px; }
.d-src:empty { display: none; }
.d-src .src-tag { max-width: 100%; padding: 3px 10px; border-radius: 999px; background: var(--chip); border: 1px solid var(--line); }
:root[data-theme="violatte"] .reader:not([data-rt="dark"]) .book h1, :root[data-theme="violatte"] .reader:not([data-rt="dark"]) .book h2,
:root[data-theme="lilac"] .reader:not([data-rt="dark"]) .book h1, :root[data-theme="lilac"] .reader:not([data-rt="dark"]) .book h2 { background-image: linear-gradient(135deg, #6E4C9E, #4E3878); }
/* theme menu: scroll when there are more themes than fit on screen */
@media (min-width: 861px) { body > .theme-pop, .theme-pop { max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; } }

/* one-time AI note for first-time visitors */
.ai-note { display: flex; align-items: center; gap: 12px; margin: 12px 20px 0; padding: 10px 10px 10px 16px; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; line-height: 1.45; animation: aiIn .35s ease-out; }
.ai-note p { margin: 0; flex: 1; }
.ai-note b { color: var(--ink); }
.ai-note .icon-btn { flex: none; color: var(--ink-2); }
@keyframes aiIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .ai-note { margin: 10px 12px 0; font-size: 13px; } }

/* =====================================================================
   Calmer finish: solid colours instead of gradients, no glows,
   no gradient text, no decorative stripes, steadier hover states.
   Themes, fonts, flower patterns and colours stay as they are.
   ===================================================================== */
html { --brand-c: var(--accent); }
html:not([data-theme]), html[data-theme="ruby"] { --brand-c: #f0c6d3; }
html[data-theme="bryn"] { --brand-c: #e2b48a; }
html[data-theme="lavender"] { --brand-c: #DBD8E3; }
html[data-theme="midnight"] { --brand-c: #CCD0CF; }

/* page background: keep the theme colour and its pattern, drop the soft glows */
body { background-image: var(--pattern) !important; background-color: var(--bg) !important; }
.reader-scroll { background: var(--rbg) !important; }

/* text is never gradient-filled */
html .brand span { background: none !important; -webkit-text-fill-color: currentColor; color: var(--brand-c) !important; animation: none !important; }
html .brand::before { background: var(--brand-c) !important; }
html .count { background: none !important; -webkit-text-fill-color: currentColor; color: var(--ink-2) !important; font-style: normal; }
html .book h1, html .book h2, html .book h3 { background: none !important; -webkit-text-fill-color: currentColor;
  color: color-mix(in srgb, var(--rink) 72%, var(--accent)) !important; }
html .reader[data-rt="dark"] .book h1, html .reader[data-rt="dark"] .book h2 { color: color-mix(in srgb, var(--rink) 80%, var(--accent)) !important; }

/* no decorative gradient stripes on cards, header, drawer and reader bar */
html .card::before, html .top::after, html .reader-bar::after, html .d-head::after { display: none !important; }
html .top { border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }

/* solid accent colour for buttons and selected states, with no glow shadow */
html { --solid: var(--accent); --solid-ink: var(--accent-ink); }
html[data-theme="bryn"] { --solid: #7a4f36; --solid-ink: #f6e9da; }
html .btn.primary, html .shelves a.on, html .seg button.on, html .fchip, html .reader-bar .seg button.on,
html .g-n, html .rating, html .rating.G, html .rating.T, html .rating.M, html .rating.E, html .rating.N {
  background: var(--solid) !important; color: var(--solid-ink) !important; box-shadow: none !important; }
html .shelves a.on .n { color: color-mix(in srgb, var(--solid-ink) 80%, transparent) !important; }
html .btn.primary:hover { background: color-mix(in srgb, var(--solid) 86%, #000) !important; transform: none; }
html .chip:hover { background: var(--accent-soft) !important; color: var(--ink) !important; }
html .pbar > div, html .bar > div, html .reader-progress > div { background: var(--accent) !important; box-shadow: none !important; }
html .g-icon { background: var(--accent) !important; }
html .book blockquote, html .b-summary { border-image: none !important; border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line)) !important; }

/* cards: an edge or a shadow, not both; no jumping on hover; tighter corners */
html .card { border-radius: 12px; box-shadow: none !important; }
html .card:hover { transform: none !important; box-shadow: none !important; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important; }
html .rows, html .card.blurb { border-radius: 12px; }
html .modal-card, html .dlg, html .theme-pop { border-radius: 16px; }
html .g-steps li { border-radius: 12px; }

/* card footer: spacing instead of dot separators */
.meta-row { gap: 6px 14px; }
.meta-row .mi { display: inline-flex; align-items: center; }

/* small icons used in buttons */
.ico, .plus svg, .drop svg { vertical-align: -2px; flex: none; }
.btn .ico, #emptyAdd svg { margin-right: 4px; }
.seg [data-view] svg { fill: currentColor; display: block; }
.seg [data-view] { display: inline-grid; place-items: center; }