:root { color-scheme: light dark; --bg: #fafaf8; --fg: #1d1d1b; --muted: #6b6b66; --card: #fff; --line: #e2e2dc; --accent: #2f6fed; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #161615; --fg: #e8e8e4; --muted: #9a9a93; --card: #1f1f1d; --line: #333330; --accent: #6b9bff; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, sans-serif; }
.container { max-width: 52rem; margin: 0 auto; padding: 1.5rem 1.25rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: .5rem; padding: 1.25rem; }
.narrow { max-width: 22rem; margin: 3rem auto; }
label { display: block; margin: .75rem 0; }
input[type=password], input[type=text], input[type=url] { width: 100%; padding: .5rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--bg); color: var(--fg); }
button { padding: .5rem 1rem; border: 0; border-radius: .35rem; background: var(--accent); color: #fff; cursor: pointer; }
button.link { background: none; color: var(--accent); padding: 0; }
.error { color: #c0392b; }
.muted { color: var(--muted); }
.list { list-style: none; padding: 0; }
.list li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.badge { font-size: .75rem; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: .25rem; padding: 0 .35rem; margin-right: .5rem; }
.save-row { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.save-row input { flex: 1; }
.list a { color: var(--fg); }
.doc-header h1 { margin-bottom: .25rem; }
.actions { display: flex; gap: .5rem; margin: .75rem 0 1.5rem; }
button.danger { background: #c0392b; }
.prose { font: 1.125rem/1.7 Georgia, serif; }
.prose img { max-width: 100%; height: auto; }
.prose pre { overflow-x: auto; background: var(--card); padding: .75rem; border-radius: .35rem; }
.prose blockquote { margin-left: 0; padding-left: 1rem; border-left: 3px solid var(--line); color: var(--muted); }
mark { color: inherit; cursor: pointer; }
mark.hl-yellow, .hl-yellow { background: #ffe66d99; }
mark.hl-green, .hl-green { background: #7bd88f88; }
mark.hl-blue, .hl-blue { background: #74b9ff88; }
mark.hl-pink, .hl-pink { background: #ff9fd088; }
mark.hl-orange, .hl-orange { background: #ffb36688; }
mark.ul { background: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: #e0a800; }
.quote { margin: 0; padding: .25rem .5rem; border-radius: .25rem; font-family: Georgia, serif; }
.quote.ul { background: none; text-decoration: underline; text-decoration-color: #e0a800; text-decoration-thickness: 2px; }
.note { margin: .35rem 0 0 .5rem; color: var(--muted); white-space: pre-wrap; }
.toolbar, .popover { position: absolute; z-index: 10; display: flex; gap: .35rem; align-items: center; padding: .4rem; background: var(--card); border: 1px solid var(--line); border-radius: .5rem; box-shadow: 0 4px 16px #0003; }
.popover { flex-direction: column; align-items: stretch; width: 16rem; }
.popover .row { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.popover textarea { width: 100%; min-height: 4rem; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: .35rem; padding: .35rem; font: inherit; }
.swatch { width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 50%; border: 1px solid var(--line); }
.text-btn { padding: .2rem .5rem; background: none; color: var(--fg); border: 1px solid var(--line); }
[hidden] { display: none !important; }
.doc-row { display: flex; gap: .75rem; align-items: center; }
.thumb { width: 3rem; height: 4.25rem; object-fit: cover; border-radius: .25rem; border: 1px solid var(--line); }
.epub-viewer { height: calc(100vh - 6rem); min-height: 24rem; background: #fff; border: 1px solid var(--line); border-radius: .35rem; }
input[type=file] { flex: 1; min-width: 0; }

/* PDF reader */
.pdf-scroll { position: relative; height: 80vh; overflow: auto; background: #6b7280; border: 1px solid var(--line); border-radius: .35rem; padding: 8px 0 0; }
.pdf-page { position: relative; margin: 0 auto 8px; background: #fff; box-shadow: 0 1px 4px #0005; isolation: isolate; }
.pdf-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pdf-hl { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; }
.pdf-hl .ann { position: absolute; inset: 0; }
.pdf-hl .ann.hl { opacity: .45; }
.pdf-hl .r { position: absolute; }
.pdf-hl .ann.ul .r { height: 2px; margin-top: -2px; }
.textLayer { position: absolute; inset: 0; overflow: clip; opacity: 1; line-height: 1; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 0; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: rgb(0 0 255 / .25); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.textLayer.selecting .endOfContent { top: 0; }

/* tags, search, review */
a.button { display: inline-block; padding: .4rem .75rem; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: .35rem; text-decoration: none; font-size: .9rem; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .5rem; }
.tag { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; border: 1px solid var(--line); border-radius: 1rem; padding: 0 .5rem; margin-left: .25rem; color: var(--muted); text-decoration: none; }
.tags .tag { margin-left: 0; }
.tag a, a.tag { color: var(--muted); text-decoration: none; }
.tag form { display: inline; }
.tag button.link { padding: 0 .1rem; }
a.tag.active { border-color: var(--fg); color: var(--fg); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag-cloud .tag { margin-left: 0; }
.tag-add input { width: 6rem; padding: .15rem .5rem; font-size: .8rem; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 1rem; }
.snippet { margin: .25rem 0 0; color: var(--muted); }
.search-hit mark, .snippet mark, .quote mark { background: #ffe66dcc; color: inherit; cursor: default; }
.review-list li { padding: 1rem 0; }

/* sidebar */
.app { display: flex; min-height: 100vh; }
.content { flex: 1; min-width: 0; position: relative; }
.sidebar { width: 15rem; flex: none; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: .5rem; padding: .75rem .6rem; background: var(--card); border-right: 1px solid var(--line); overflow-y: auto; }
.sidebar-head { display: flex; justify-content: space-between; align-items: center; padding: .1rem .35rem .5rem; }
.brand { font-weight: 700; font-size: 1.1rem; color: var(--fg); text-decoration: none; }
.sidebar-nav { display: flex; flex-direction: column; gap: .1rem; flex: 1; }
.sidebar-foot { display: flex; flex-direction: column; gap: .1rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.nav-item { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .4rem .55rem; border-radius: .4rem; color: var(--fg); text-decoration: none; font: inherit; font-size: .95rem; background: none; border: 0; cursor: pointer; text-align: left; }
.nav-item:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.nav-item.active { background: color-mix(in srgb, var(--fg) 11%, transparent); font-weight: 600; }
.nav-item .icon { flex: none; color: var(--muted); }
.nav-item.active .icon { color: var(--fg); }
.nav-item.sub-1 { padding-left: 1.9rem; }
.nav-item.sub-2 { padding-left: 3rem; font-size: .9rem; }
.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: ""; margin-left: auto; width: .4rem; height: .4rem; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.nav-group[open] > summary::after { transform: rotate(45deg); }
.nav-search { display: flex; align-items: center; gap: .65rem; padding: .25rem .55rem; color: var(--muted); }
.nav-search input { flex: 1; min-width: 0; padding: .25rem .4rem; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: .35rem; font: inherit; font-size: .9rem; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; background: none; color: var(--muted); border-radius: .4rem; }
.icon-btn:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }
.open-nav { display: none; position: absolute; top: .75rem; left: .75rem; z-index: 5; }
.nav-backdrop { display: none; }
.nav-closed .sidebar { display: none; }
.nav-closed .open-nav { display: inline-flex; }
.nav-closed .content .container { padding-top: 3.25rem; }
@media (max-width: 799px) {
  .sidebar { position: fixed; left: 0; top: 0; height: 100dvh; z-index: 40; box-shadow: 0 0 24px #0005; }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 30; background: #0006; }
  .nav-closed .nav-backdrop { display: none; }
}

/* reader layout: chapters (left) + info (right) */
.container.wide { max-width: none; padding: 0; }
.nav-closed .content .container.wide { padding-top: 0; }
.reader-layout { display: flex; align-items: flex-start; }
.reader-main { flex: 1; min-width: 0; max-width: 56rem; margin: 0 auto; padding: 1rem 1.25rem 1.5rem; }
.reader-main.full { max-width: none; margin: 0; }
.nav-closed .reader-main { padding-top: 3.25rem; }
.panel-toggles { display: flex; justify-content: space-between; margin-bottom: .5rem; }
.panel { flex: none; width: 17rem; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--card); overflow: hidden; }
.panel-left { border-right: 1px solid var(--line); }
.panel-right { border-left: 1px solid var(--line); width: 18rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .75rem .75rem .5rem 1rem; border-bottom: 1px solid var(--line); }
.nav-closed .panel-left .panel-head { padding-left: 3rem; }
.panel-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.panel-body { flex: 1; overflow-y: auto; padding: .5rem; }
.panel-empty { padding: 0 1rem; font-size: .9rem; }
.toc-item { display: block; width: 100%; text-align: left; padding: .35rem .6rem .35rem calc(.6rem + var(--depth, 0) * 1rem); border-radius: .4rem; background: none; color: var(--fg); font: inherit; font-size: .9rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-item:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.toc-item.current { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 600; }
.panel-right .panel-body { padding: 1rem; }
.info-title { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .25rem; }
.info-author { margin: 0 0 1rem; }
.info-section { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 1.25rem 0 .5rem; }
.info-list { margin: 0; }
.info-row { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .9rem; }
.info-row dt { color: var(--muted); flex: none; }
.info-row dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.info-path { font-size: .78rem; word-break: break-all; }
.panel-backdrop { display: none; }
.toc-closed .panel-left, .info-closed .panel-right { display: none; }
@media (max-width: 1099px) {
  .panel { position: fixed; top: 0; height: 100dvh; z-index: 35; width: min(20rem, 88vw); box-shadow: 0 0 24px #0005; }
  .panel-left { left: 0; }
  .panel-right { right: 0; }
  html:not(.toc-closed) .panel-backdrop, html:not(.info-closed) .panel-backdrop { display: block; position: fixed; inset: 0; z-index: 34; background: #0006; }
  .nav-closed .panel-left .panel-head { padding-left: 1rem; }
}
.info-row.stack { flex-direction: column; gap: .15rem; }
.info-row.stack dd { text-align: left; }

.panel-foot { flex: none; padding: .75rem 1rem 1rem; border-top: 1px solid var(--line); max-height: 55%; overflow-y: auto; }
.panel-foot .tags { margin: 0 0 .75rem; }
.panel-foot .actions { flex-direction: column; margin: 0; }
.panel-foot .actions form { display: flex; }
.panel-foot .actions .button, .panel-foot .actions button { flex: 1; text-align: center; box-sizing: border-box; }
.panel-foot .tag-add input { width: 6rem; }
.panel-foot .actions .button, .panel-foot .actions button { font-size: .9rem; padding: .5rem .75rem; }

.toolbar { gap: .15rem; padding: .3rem; border-radius: 1.5rem; }
.tb-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fg); cursor: pointer; }
.tb-btn:hover, .tb-btn.active { background: var(--line); }
.tb-icon { display: inline-flex; }
.tb-group { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .3rem; margin: 0 .1rem; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.tb-group .swatch { cursor: pointer; }
.dict-panel { position: absolute; left: 0; top: calc(100% + .4rem); width: 21rem; max-width: 86vw; max-height: 20rem; overflow-y: auto; padding: .75rem .9rem; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: .75rem; box-shadow: 0 6px 24px #0003; font-size: .9rem; line-height: 1.45; text-align: left; }
.dict-panel.right { left: auto; right: 0; }
.dict-panel.up { top: auto; bottom: calc(100% + .4rem); }
.dict-tabs { display: flex; gap: .35rem; margin-bottom: .5rem; }
.dict-tab { padding: .15rem .65rem; border-radius: 1rem; border: 1px solid var(--line); background: none; color: var(--fg); font-size: .8rem; cursor: pointer; }
.dict-tab.active { background: var(--fg); color: var(--card); border-color: var(--fg); }
.dict-word { margin: 0 0 .25rem; font-size: 1.05rem; }
.dict-pos { margin: .5rem 0 .15rem; font-style: italic; color: var(--muted); font-size: .8rem; }
.dict-defs { margin: 0; padding-left: 1.25rem; }
.dict-defs li { margin-bottom: .3rem; }
.dict-empty { margin: 0; color: var(--muted); }
.dict-source { display: inline-block; margin-top: .4rem; font-size: .78rem; color: var(--muted); }
.tr-text { margin: 0; font-size: 1rem; line-height: 1.5; white-space: pre-wrap; user-select: text; }
.dict-panel .dict-source { display: block; }

.panel-toggle-group { display: flex; gap: .25rem; }
.icon-btn.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.panel-tabs { display: flex; gap: .25rem; min-width: 0; }
.panel-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border: 0; border-radius: .4rem; background: none; color: var(--muted); font: inherit; font-size: .88rem; cursor: pointer; white-space: nowrap; }
.panel-tab:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.panel-right .panel-tab:not(.active) span { display: none; }
.panel-tab.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 600; }
.panel-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel-view[data-view="info"], .panel-view[data-view="notes"], .panel-view[data-view="chat"] { display: none; }
html:not(.view-notes):not(.view-chat) .panel-view[data-view="info"], .view-notes .panel-view[data-view="notes"], .view-chat .panel-view[data-view="chat"] { display: flex; }
.view-chat .panel-right { width: 26rem; }
.panel-view > .panel-body { flex: 1; }
.notes-list { margin: 0; }
.notes-list li.note-item { position: relative; margin: 0 0 .5rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: .5rem; cursor: pointer; }
.notes-list li.note-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.notes-list li.note-item.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.notes-list .quote { font-size: .9rem; line-height: 1.45; }
.note-meta { margin: .25rem 0 0 .5rem; font-size: .8rem; }
.note-go { margin: .35rem 0 0 .25rem; padding: .1rem .4rem; border: 0; background: none; color: var(--accent); font: inherit; font-size: .8rem; cursor: pointer; }
.note-go:hover { text-decoration: underline; }
.notes-foot { display: flex; flex-direction: column; gap: .5rem; }
.notes-count { margin: 0; font-size: .85rem; }
.notes-actions { display: flex; gap: .5rem; }
.notes-actions > * { flex: 1; text-align: center; box-sizing: border-box; font-size: .9rem; padding: .5rem .5rem; }
.notes-actions .button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: auto; }
.notes-actions #notes-select-all { background: var(--card); color: var(--fg); border: 1px solid var(--line); }
.notes-actions #notes-delete:disabled { opacity: .45; cursor: not-allowed; }
.notes-actions #notes-export { background: var(--accent); color: #fff; border-color: var(--accent); }

.container.home { max-width: 80rem; }
.home-section { margin: 0 0 2.25rem; }
.home-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .85rem; }
.home-head h2 { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.15rem; }
.home-head .muted { font-size: .85rem; }
.home-more { margin-left: auto; font-size: .85rem; color: var(--accent); text-decoration: none; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 1rem; }
.doc-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: .6rem; overflow: hidden; color: var(--fg); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.doc-card:hover { box-shadow: 0 4px 14px #0002; transform: translateY(-2px); }
.doc-cover { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--card)), color-mix(in srgb, #d56bff 10%, var(--card))); border-bottom: 1px solid var(--line); overflow: hidden; }
.doc-cover img { width: 100%; height: 100%; object-fit: cover; }
.doc-cover-ph { color: var(--muted); opacity: .7; }
.doc-cover-ph .icon { width: 3rem; height: 3rem; }
.doc-fav { position: absolute; top: .4rem; right: .4rem; display: inline-flex; padding: .25rem; border-radius: 50%; background: var(--card); color: #e0a800; box-shadow: 0 1px 4px #0004; }
.doc-fav .icon { width: 14px; height: 14px; fill: currentColor; }
.doc-meta { display: flex; flex-direction: column; gap: .3rem; padding: .7rem .8rem .75rem; flex: 1; }
.doc-kind { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.doc-kind .icon { width: 14px; height: 14px; }
.doc-title { font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .25rem; font-size: .8rem; color: var(--muted); }
.doc-author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ring { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: conic-gradient(var(--accent) var(--p), var(--line) 0); -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%); mask: radial-gradient(circle, transparent 38%, #000 40%); }
.ring.done { background: var(--muted); }
button.secondary { background: var(--card); color: var(--fg); border: 1px solid var(--line); }
.save-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.save-forms .save-row { margin-bottom: 0; padding: .75rem 1rem; align-items: center; }
.save-forms .upload-hint { flex: 1; min-width: 0; }
.import-report { margin-bottom: 1.5rem; padding: .75rem 1rem; }
.import-report ul { margin: 0; }

/* Archivio GDrive */
.steps { display: flex; gap: 1rem; list-style: none; padding: 0; margin: 1rem 0; flex-wrap: wrap; }
.steps li { color: var(--muted); }
.steps li.current { color: var(--fg); font-weight: 600; }
.steps li.done::before { content: "✓ "; color: var(--accent); }
.card textarea { width: 100%; padding: .5rem; font: .85rem/1.4 ui-monospace, monospace; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: .35rem; }
.card details { margin: .75rem 0; }
.inline-reset { margin-top: 1rem; }
.check { display: flex; gap: .5rem; align-items: center; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* Azioni documento (Drive / presenza nell'app) */
.doc-actions { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; margin-right: .5rem; position: relative; z-index: 2; }
button.act { background: none; border: 0; padding: .1rem; border-radius: 50%; line-height: 0; color: var(--muted); cursor: pointer; position: relative; display: inline-flex; }
button.act:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 8%, transparent); }
button.act svg { width: .95rem; height: .95rem; display: block; }
button.act:disabled { opacity: 1; cursor: default; }
.act.gdrive.on { cursor: pointer; }
.act.gdrive.off .gd { opacity: .35; }
.act.gdrive.off:hover .gd { opacity: .75; }
.act.gdrive.err { box-shadow: 0 0 0 1.5px #d04040; }
.act.trash.here { color: #3aa34a; }
.act.trash.gone { color: #d04040; }
.act.busy svg { visibility: hidden; }
.act.busy::after { content: ""; position: absolute; inset: .15rem; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: act-spin .7s linear infinite; }
.act.queued { opacity: .6; }
@keyframes act-spin { to { transform: rotate(360deg); } }
.ghost { --ghost: .55; }
.ghost:hover { --ghost: .85; }
.ghost > :not(:has(.doc-actions), .doc-actions),
.ghost :has(.doc-actions) > :not(:has(.doc-actions), .doc-actions) { opacity: var(--ghost); }
.doc-kindrow { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.doc-kindrow .doc-actions { margin-right: 0; }
.doc-link { color: inherit; text-decoration: none; }
.doc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.doc-card:focus-within { outline: 2px solid var(--accent); }
#gd-status { position: fixed; right: 1rem; bottom: 1rem; max-width: 24rem; padding: .6rem .9rem; border-radius: .5rem; background: var(--card); border: 1px solid var(--line); box-shadow: 0 4px 14px #0003; z-index: 50; font-size: .9rem; }
#gd-status.error { border-color: #d93025; color: #d93025; }

.gd-dialog { border: 1px solid var(--line); border-radius: .6rem; background: var(--card); color: inherit; max-width: 28rem; padding: 1.1rem 1.2rem; }
.gd-dialog::backdrop { background: #0006; }
.gd-dialog .actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

.nav-count { margin-left: auto; font-size: .75rem; color: var(--muted); background: color-mix(in srgb, var(--fg) 9%, transparent); border-radius: 1rem; padding: 0 .45rem; }
.feed-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.feed-tools a { color: var(--muted); font-size: .9rem; }
.feed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .5rem 0 1rem; font-size: .9rem; }
.feed-tools form { margin: 0; }
.inline-form { display: flex; align-items: center; gap: .4rem; }
.feed-item.read { opacity: .55; }
.feed-item.read:hover { opacity: .85; }
.feed-title { font-weight: 600; color: var(--fg); text-decoration: none; }
.feed-title:hover { text-decoration: underline; }
.feed-meta { font-size: .82rem; }
.feed-meta a { color: inherit; }
.feed-summary { margin: .35rem 0; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.feed-actions { display: flex; gap: .5rem; margin-top: .3rem; }
.feed-btn { font: inherit; font-size: .8rem; padding: .1rem .55rem; border: 1px solid var(--line); border-radius: .35rem; background: none; color: var(--fg); cursor: pointer; text-decoration: none; }
.feed-btn:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.feed-pages { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0; }
.feed-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; }
.feed-row .feed-meta { overflow-wrap: anywhere; }
.feed-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.feed-row-actions form { margin: 0; }
.feed-tabs { display: flex; gap: 1.2rem; border-bottom: 1px solid var(--line); margin: .25rem 0 1rem; }
.feed-tabs a { padding: .4rem 0; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.feed-tabs a[aria-current] { color: var(--fg); border-color: var(--fg); font-weight: 600; }
.feed-card { display: flex; gap: .9rem; align-items: flex-start; }
.feed-body { flex: 1; min-width: 0; }
.feed-thumb { flex: none; width: 8.5rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .4rem; background: var(--card); border: 1px solid var(--line); }
.feed-thumb.empty { display: block; }
.feed-actions { flex-wrap: wrap; }
@media (max-width: 560px) { .feed-thumb { width: 5.5rem; } }

.bookmarklet-hint { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; }
.bookmarklet { padding: 0.1rem 0.5rem; border: 1px dashed var(--border, #bbb); border-radius: 4px; cursor: grab; }

/* settings gear (home, top right) */
.settings-gear { position: absolute; top: .75rem; right: .75rem; z-index: 5; text-decoration: none; }
.choice { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem; margin: .5rem 0; border: 1px solid var(--line); border-radius: .5rem; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.choice input { margin-top: .3rem; }
.notice { padding: .5rem .75rem; border-radius: .4rem; background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* reader appearance panel */
.panel-toggles { position: relative; }
.panel-toggles:has(.prefs-panel:not([hidden])) { position: sticky; top: 0; z-index: 15; background: var(--bg); padding-bottom: .25rem; }
.prefs-panel { position: absolute; right: 0; top: 100%; z-index: 20; width: min(22rem, 92vw); max-height: 75vh; overflow-y: auto; padding: .85rem 1rem; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: .75rem; box-shadow: 0 8px 28px #0004; }
.search-panel { width: min(26rem, 94vw); }
.search-form { display: flex; gap: .35rem; align-items: center; }
.search-input { flex: 1; min-width: 0; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--bg); color: var(--fg); font: inherit; }
.search-step { flex: none; width: 2.1rem; height: 2.1rem; font-size: 1.05rem; line-height: 1; }
.search-step:disabled { opacity: .35; cursor: default; }
.search-status { margin: .45rem 0 .25rem; font-size: .8rem; min-height: 1.1em; }
.search-results { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.search-group { margin: .5rem 0 .15rem; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.search-hit { display: block; width: 100%; padding: .4rem .5rem; border: 0; border-left: 3px solid transparent; border-radius: .3rem; background: none; color: var(--fg); font: inherit; font-size: .85rem; line-height: 1.35; text-align: left; cursor: pointer; }
.search-hit:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.search-hit.active { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.search-hit mark { background: #ffe66dcc; color: inherit; border-radius: .15rem; padding: 0 .05rem; }
.search-page { display: inline-block; margin-right: .4rem; font-size: .7rem; color: var(--muted); }
.pdf-search .r { background: #ffd54f; opacity: .55; border-radius: 2px; }
.pdf-search .r.active { background: #ff9100; opacity: .6; outline: 2px solid #e8590c; }
::highlight(search-hit) { background-color: #ffd54fcc; color: inherit; }
::highlight(search-active) { background-color: #ff9100cc; color: inherit; }
.pref-row { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .8rem; }
.pref-label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: .25rem; }
.seg button { flex: 1 1 auto; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: .4rem; background: none; color: var(--fg); font: inherit; font-size: .85rem; cursor: pointer; }
.seg button:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.seg button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.stepper { display: flex; align-items: center; gap: .5rem; }
.step-btn { width: 2.2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: .4rem; background: none; color: var(--fg); font-size: 1.1rem; cursor: pointer; }
.step-btn:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.stepper-value { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.pref-note { font-size: .78rem; margin: .25rem 0 0; }

/* reader fullscreen + theming */
.epub-viewer { background: var(--reader-bg, #fff); }
foliate-view { display: block; width: 100%; height: 100%; }
.reader-layout:fullscreen { background: var(--bg); color: var(--fg); overflow: auto; }
.reader-layout:fullscreen .reader-main { padding-top: .5rem; padding-bottom: .5rem; }
.reader-layout:fullscreen .epub-viewer { height: calc(100vh - 3.25rem); }
.reader-layout:fullscreen .pdf-scroll { height: calc(100vh - 3.25rem); }
.pdf-scroll.invert { background: #1b1b1d; }
.pdf-scroll.invert canvas { filter: invert(1) hue-rotate(180deg); }

/* AI assistant: settings */
select, input[type=number], .llm-card textarea { padding: .45rem .5rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--bg); color: var(--fg); font: inherit; max-width: 100%; }
select { width: 100%; }
.llm-card { margin-top: 1.5rem; }
.llm-card h3 { font-size: 1rem; margin: 1.25rem 0 .25rem; }
.llm-card textarea { width: 100%; font-size: .9rem; line-height: 1.4; margin-bottom: .5rem; }
.llm-card details { margin-top: 1rem; }
.llm-card summary { cursor: pointer; }
.llm-list { list-style: none; margin: .75rem 0; padding: 0; }
.llm-item { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.llm-item:last-child { border-bottom: 1px solid var(--line); }
.llm-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.llm-key { font-size: .82rem; }
.llm-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.llm-actions button { padding: .3rem .65rem; font-size: .85rem; }
.llm-form-actions { display: flex; gap: .5rem; }
.llm-status { min-height: 1.4em; margin: .75rem 0 0; }
.llm-status.error { color: #c0392b; }
button.secondary { background: none; color: var(--fg); border: 1px solid var(--line); }
button.secondary:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }

/* AI assistant: chat panel */
.panel-view[data-view="chat"] { min-height: 0; }
.chat-head { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; padding: .6rem .75rem; border-bottom: 1px solid var(--line); }
.chat-head .chat-provider { flex: 1 1 100%; width: auto; font-size: .85rem; }
.chat-head button, .chat-quick button { padding: .25rem .6rem; font-size: .82rem; }
.chat-history { max-height: 12rem; overflow-y: auto; padding: .4rem .75rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 3%, transparent); }
.chat-history-row { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; font-size: .85rem; }
.chat-history-open { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; }
.chat-notice { margin: 0; padding: .75rem 1rem; font-size: .9rem; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: .6rem; }
.chat-msg { max-width: 94%; padding: .5rem .7rem; border-radius: .7rem; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.chat-msg.user { align-self: flex-end; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.chat-msg.assistant { align-self: flex-start; background: color-mix(in srgb, var(--fg) 6%, transparent); max-width: 100%; }
.chat-msg.error { align-self: stretch; max-width: 100%; color: #c0392b; background: color-mix(in srgb, #c0392b 10%, transparent); }
.chat-msg.streaming .chat-body:empty::after { content: "…"; color: var(--muted); }
.chat-body > :first-child { margin-top: 0; }
.chat-body > :last-child { margin-bottom: 0; }
.chat-body p, .chat-body ul, .chat-body ol, .chat-body blockquote, .chat-body pre { margin: .4rem 0; }
.chat-body ul, .chat-body ol { padding-left: 1.3rem; }
.chat-body h3, .chat-body h4, .chat-body h5, .chat-body h6 { margin: .6rem 0 .25rem; font-size: 1rem; }
.chat-body pre { overflow-x: auto; padding: .5rem; border-radius: .4rem; background: var(--bg); font-size: .82rem; }
.chat-body code { font-size: .85em; }
.chat-body blockquote { padding-left: .6rem; border-left: 3px solid var(--line); color: var(--muted); }
.chat-quote { margin: 0 0 .35rem; padding-left: .5rem; border-left: 3px solid var(--accent); color: var(--muted); font-size: .82rem; font-style: italic; }
.chat-meta { font-size: .72rem; margin-top: .25rem; }
.chat-foot { flex: none; padding: .6rem .75rem .75rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .4rem; }
.chat-chip { display: flex; align-items: flex-start; gap: .4rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: .5rem; font-size: .8rem; }
.chat-chip-label { flex: none; text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; color: var(--accent); padding-top: .1rem; }
.chat-chip-text { flex: 1; min-width: 0; max-height: 4.5rem; overflow-y: auto; font-style: italic; color: var(--muted); overflow-wrap: anywhere; }
.chat-scope { display: flex; align-items: center; gap: .5rem; }
.chat-scope .seg { flex: 1; }
.chat-hint { margin: 0; font-size: .75rem; }
.chat-quick { display: flex; flex-wrap: wrap; gap: .3rem; }
.chat-form { display: flex; gap: .4rem; align-items: flex-end; }
.chat-input { flex: 1; resize: vertical; min-height: 2.6rem; max-height: 10rem; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--bg); color: var(--fg); font: inherit; font-size: .9rem; }
.chat-send, .chat-stop { padding: .5rem .8rem; }
.chat-form button[hidden] { display: none; }

/* list filters + text search */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.filters { margin: .75rem 0; padding: .6rem 1rem; }
.filters > summary { cursor: pointer; font-weight: 600; }
.filters-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .25rem .9rem; align-items: end; margin-top: .5rem; }
.filters-form label { margin: .35rem 0; font-size: .85rem; color: var(--muted); }
.filters-form label select, .filters-form fieldset input { margin-top: .2rem; color: var(--fg); }
.filters-form .check { color: var(--fg); }
.filters-form fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: .5rem; }
.filters-form fieldset { grid-column: span 2; }
@media (max-width: 40rem) { .filters-form fieldset { grid-column: 1 / -1; } }
.filters-form fieldset legend { font-size: .85rem; color: var(--muted); padding: 0; }
.filters-form fieldset label { flex: 1; min-width: 0; }
.filters-form fieldset input { width: 100%; box-sizing: border-box; padding: .4rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--bg); font: inherit; }
.filters-actions { display: flex; gap: .5rem; align-items: center; grid-column: 1 / -1; margin-top: .4rem; }
.text-search { margin: .75rem 0 1rem; padding: .6rem 1rem; }
.text-search-field { margin: 0; }
.text-search input[type=search] { width: 100%; box-sizing: border-box; padding: .5rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--bg); color: var(--fg); font: inherit; }
.text-search-status { margin: .5rem 0 0; font-size: .85rem; }
.text-search-results:not(:empty) { margin-top: .5rem; max-height: 60vh; overflow-y: auto; }
.text-search-doc { padding: .25rem 0 .5rem; border-top: 1px solid var(--line); }
.text-search-doc:first-child { border-top: 0; }
.text-search-doc .search-group { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--fg); }
a.search-hit { text-decoration: none; }
.text-search-more { display: inline-block; margin: .2rem .5rem; font-size: .8rem; }
a.text-hit { display: block; color: var(--muted); text-decoration: none; }
a.text-hit:hover { color: var(--fg); }
.pager { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 1rem 0; }

.recs .rec-section { font-size: .95rem; margin: 1.2rem 0 .2rem; padding-top: .6rem; border-top: 2px solid var(--line); }
.recs .rec-group { font-size: .85rem; margin: .9rem 0 .3rem; }
.recs .rec-list { list-style: none; margin: 0; padding: 0; }
.recs .rec { padding: .4rem 0; border-top: 1px solid var(--line); font-size: .88rem; line-height: 1.35; }
.recs .rec:first-child { border-top: 0; }
.recs .rec-title { font-weight: 600; overflow-wrap: anywhere; }
.recs .rec-meta { font-size: .8rem; }
.recs .rec-reason { margin-top: .15rem; }
.recs .rec-note { font-size: .78rem; margin: .75rem 0 .5rem; }
.recs .rec-warning { color: var(--muted, #8a6d00); }
.container.stats { max-width: 64rem; }
.stats-filters { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1.25rem; }
.stats-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.stats-filter .muted { min-width: 4rem; font-size: .85rem; }
.chip { font-size: .85rem; padding: .15rem .7rem; border: 1px solid var(--line); border-radius: 1rem; color: var(--fg); text-decoration: none; background: var(--card); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: .5rem; padding: .8rem 1rem; }
.stat-value { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.stat-label { font-size: .8rem; color: var(--fg); margin-top: .15rem; }
.stats-section { margin-bottom: 1.5rem; min-width: 0; }
.stats-section h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.stats-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 9rem; padding: .5rem; background: var(--card); border: 1px solid var(--line); border-radius: .5rem; }
.bars .bar, .bars .bar-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.bars .bar span { display: block; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 1px; opacity: .85; }
.bars .bar:hover span { opacity: 1; }
.bars.weekday { gap: .4rem; height: 10rem; }
.bars.weekday .bar-col { gap: .25rem; font-size: .75rem; text-align: center; }
.bars.weekday .bar { flex: 1; }
.bars-axis { display: flex; justify-content: space-between; font-size: .75rem; margin-top: .2rem; }
.stat-list { list-style: none; margin: 0; padding: 0; }
.stat-list li { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.stat-list li > a, .stat-list li > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-list .muted { flex: none; font-size: .8rem; }
.meter { flex: 1; height: .5rem; background: var(--line); border-radius: .25rem; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); }
.stats-note { font-size: .8rem; margin-top: 2rem; }

.review-tile { cursor: pointer; }
.review-tile .doc-meta { gap: .15rem; }
.review-puzzle { display: grid; grid-template-columns: repeat(var(--cols, 1), 1fr); grid-auto-rows: 1fr; width: 100%; height: 100%; gap: 2px; background: var(--line); }
.review-puzzle img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; display: block; }
.review-puzzle-ph { display: flex; align-items: center; justify-content: center; background: var(--card); color: var(--muted); }
.review-puzzle-ph .icon { width: 1.5rem; height: 1.5rem; }

.quiz-body { height: 100vh; height: 100dvh; overflow: hidden; }
.quiz { display: flex; flex-direction: column; height: 100%; max-width: 44rem; margin: 0 auto; }
.quiz-head { flex: none; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.quiz-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.quiz-source { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-progress { font-size: .85rem; white-space: nowrap; }
.quiz-log { padding: 1rem; }
.quiz-form { flex: none; padding: .75rem 1rem 0; }
.quiz-hint { flex: none; margin: 0; padding: .4rem 1rem .75rem; font-size: .75rem; }
.quiz-end { flex: none; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .75rem 1rem; border-top: 1px solid var(--line); }
.quiz-end[hidden] { display: none; }
.quiz-score { font-size: .75rem; font-weight: 600; margin-bottom: .35rem; padding: .1rem .5rem; border-radius: 1rem; display: inline-block; color: #fff; }
.quiz-score.good { background: #2f9e44; }
.quiz-score.mid { background: #e08e0b; }
.quiz-score.low { background: #c0392b; }

.review-tile { position: relative; }
.review-open { position: absolute; inset: 0; z-index: 1; }
.review-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: .6rem; }
.doc-cover { position: relative; }
.quiz-btn { position: absolute; z-index: 2; left: .5rem; right: .5rem; bottom: .5rem; padding: .35rem .5rem; text-align: center; font-size: .8rem; font-weight: 600; color: #fff; background: color-mix(in srgb, var(--accent) 92%, #000); border-radius: .4rem; text-decoration: none; opacity: .92; box-shadow: 0 2px 8px #0004; }
.quiz-btn:hover { opacity: 1; text-decoration: none; }

.gauge { max-width: 32rem; margin: 1rem 0 .25rem; }
.gauge-track { position: relative; display: flex; gap: 3px; height: 1rem; }
.gauge-seg { flex: 1; border-radius: .5rem; opacity: .28; background: var(--c); transition: opacity .3s; }
.gauge-seg.on { opacity: 1; }
.seg-0, .lvl-0 { --c: #c0392b; } .seg-1, .lvl-1 { --c: #e08e0b; } .seg-2, .lvl-2 { --c: #c9b800; }
.seg-3, .lvl-3 { --c: #5aa02c; } .seg-4, .lvl-4 { --c: #1f8a4c; }
.gauge-marker { position: absolute; top: -.35rem; width: 4px; height: 1.7rem; margin-left: -2px; border-radius: 2px; background: var(--fg); box-shadow: 0 0 0 2px var(--bg); }
.gauge-marker.dim { opacity: .45; }
.gauge-scale { display: flex; justify-content: space-between; font-size: .75rem; margin-top: .3rem; }
.gauge-value { font-size: 1.1rem; margin: .5rem 0 0; }
.gauge-level { font-size: 1.6rem; color: var(--c); }
.gauge-meta { margin: .1rem 0 .5rem; font-size: .85rem; }
.gauge-docs-title { font-size: .95rem; margin: 1.25rem 0 .6rem; }
.gauge.mini { max-width: none; margin: 0; padding: .55rem .8rem 0; }
.gauge.mini .gauge-track { height: .5rem; gap: 2px; }
.gauge.mini .gauge-seg { border-radius: .25rem; }
.gauge.mini .gauge-marker { top: -.15rem; height: .8rem; width: 3px; margin-left: -1.5px; box-shadow: 0 0 0 1.5px var(--card); }
.gauge.empty { opacity: .45; }
.gauge.empty .gauge-seg { opacity: .35; background: var(--muted); }

.goal-list .goal { gap: .6rem; }
.goal-star { flex: none; width: 1.1rem; height: 1.1rem; color: var(--muted); opacity: .5; }
.goal-star svg { width: 100%; height: 100%; }
.goal.reached .goal-star { color: #e0a800; opacity: 1; }
.goal.reached .goal-star svg { fill: currentColor; }
.goal-label { flex: 1; min-width: 0; }
.goal-list .meter { flex: 0 0 8rem; }
.goal-list form { margin: 0; flex: none; }
.goal-form { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.goal-form input[type=number] { width: 5rem; }
.goal-toast { position: fixed; z-index: 1000; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem); display: flex; align-items: center; gap: .7rem; max-width: min(92vw, 26rem); padding: .75rem 1rem; background: var(--card); color: var(--fg); border: 1px solid #e0a800; border-radius: .75rem; box-shadow: 0 8px 28px #0004; opacity: 0; transition: opacity .3s, transform .3s; }
.goal-toast.show { opacity: 1; transform: translate(-50%, 0); }
.goal-toast .star { flex: none; width: 2rem; height: 2rem; color: #e0a800; fill: currentColor; animation: goal-pop .6s ease-out; }
.goal-toast strong { display: block; }
.goal-toast small { color: var(--muted); }
.goal-toast button { flex: none; background: none; border: 0; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
@keyframes goal-pop { 0% { transform: scale(.3) rotate(-40deg); } 70% { transform: scale(1.25) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .goal-toast, .goal-toast .star { transition: none; animation: none; } }
.link-button { background: none; border: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: 0 .3rem; cursor: pointer; }
.link-button:hover { color: var(--fg); }