:root{color-scheme:light dark;--color-bg: light-dark(#f7f4ee, #12161d);--color-surface: light-dark(#ffffff, #1a2029);--color-text: light-dark(#1d2430, #e7e3da);--color-text-muted: light-dark(#5b6472, #a3a9b4);--color-border: light-dark(#ddd6c9, #2e3643);--color-primary: light-dark(#1f3a5f, #8fb3e0);--color-primary-contrast: light-dark(#ffffff, #0d1724);--color-accent: #d9822b;--color-danger: light-dark(#b42318, #ff8a7a);--shadow: 0 1px 2px light-dark(rgb(0 0 0 / .06), rgb(0 0 0 / .4)), 0 4px 16px light-dark(rgb(0 0 0 / .06), transparent);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2.5rem;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px;--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-size-base: clamp(1rem, .95rem + .25vw, 1.0625rem);--font-size-lg: clamp(1.125rem, 1.05rem + .35vw, 1.25rem);--font-size-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);--content-max-width: 72rem;--book-cover-width: 7rem;--tap-size: 2.75rem}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark],:root[data-theme=oled]{color-scheme:dark}:root[data-theme=oled]{--color-bg: #000000;--color-surface: #0b0b0b;--color-border: #262626}*,*:before,*:after{box-sizing:border-box}html{scroll-padding-block-start:calc(var(--tap-size) + 2 * var(--space-2) + env(safe-area-inset-top))}body{margin:0;font-family:var(--font-ui);font-size:var(--font-size-base);line-height:1.5;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}img,svg{display:block;max-inline-size:100%}a{color:var(--color-primary)}:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-block-size:var(--tap-size);padding-inline:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);font:inherit;font-weight:600;color:var(--color-text);background:var(--color-surface);cursor:pointer}.button:disabled{opacity:.6;cursor:not-allowed}.button--primary{border-color:var(--color-primary);color:var(--color-primary-contrast);background:var(--color-primary)}.button--danger{border-color:var(--color-danger);color:var(--color-surface);background:var(--color-danger)}.button--ghost{border-color:transparent;background:transparent}.field{display:grid;gap:var(--space-1)}.field__label{font-weight:600}.field__input{min-block-size:var(--tap-size);padding-inline:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);font:inherit;color:inherit;background:var(--color-bg)}.spinner{display:inline-block;flex:none;inline-size:var(--spinner-size, 1em);block-size:var(--spinner-size, 1em);border:var(--spinner-width, .15em) solid var(--color-border);border-block-start-color:var(--color-primary);border-radius:50%;animation:spinner-spin .9s linear infinite}.button .spinner{border-color:color-mix(in srgb,currentColor 30%,transparent);border-block-start-color:currentColor}@keyframes spinner-spin{to{rotate:1turn}}@keyframes spinner-pulse{50%{opacity:.4}}@media(prefers-reduced-motion:reduce){.spinner{animation:spinner-pulse 2s ease-in-out infinite;animation-duration:2s!important}}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.add-books-report{position:absolute;inset-block-start:calc(100% + var(--space-2));inset-inline-end:max(var(--space-4),env(safe-area-inset-right),calc((100% - var(--content-max-width)) / 2 + var(--space-4)));z-index:5}.add-books-report__bubble{display:flex;align-items:start;gap:var(--space-2);inline-size:max-content;max-inline-size:min(22rem,100vw - 2 * var(--space-4));padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);background:var(--color-surface);box-shadow:var(--shadow)}.add-books-report__bubble--pending{align-items:center;padding-inline-end:var(--space-3)}.add-books-report__bubble--auto-close{animation:add-books-report-fade-out .4s ease-in 4s forwards}.add-books-report__bubble--auto-close:hover,.add-books-report__bubble--auto-close:focus-within{animation-play-state:paused}@keyframes add-books-report-fade-out{to{opacity:0}}.add-books-report__progress{margin:0;font-size:.875em}.add-books-report__messages{display:grid;gap:var(--space-1);align-self:center}.add-books-report__messages p,.add-books-report__messages ul{margin:0;font-size:.875em}.add-books-report__messages ul{padding:0;list-style:none}.add-books-report__error{color:var(--color-danger)}.add-books-report__close{display:grid;flex:none;place-items:center;inline-size:var(--tap-size);block-size:var(--tap-size);margin:calc(-1 * var(--space-1));padding:0;border:0;border-radius:50%;line-height:1;color:var(--color-text-muted);background:transparent;cursor:pointer}.add-books-report__close:hover{color:var(--color-text);background:var(--color-bg)}.add-books-dialog{inline-size:min(100% - 2 * var(--space-4),26rem);max-block-size:calc(100dvh - 2 * var(--space-4));padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);background:var(--color-surface);box-shadow:var(--shadow)}.add-books-dialog[open]{display:grid;gap:var(--space-4)}.add-books-dialog::backdrop{background:#00000073}.add-books-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.add-books-dialog__title{margin:0;font-size:1.25rem}.add-books-dialog__close{display:grid;place-items:center;inline-size:var(--tap-size);block-size:var(--tap-size);margin:calc(-1 * var(--space-2));padding:0;border:0;border-radius:50%;font-size:1.25rem;line-height:1;color:var(--color-text-muted);background:transparent;cursor:pointer}.add-books-dialog__close:hover{color:var(--color-text);background:var(--color-bg)}.add-books-dialog__sources{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}.add-books-dialog__source{display:grid;gap:var(--space-1);min-block-size:var(--tap-size);padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);color:inherit;text-decoration:none;cursor:pointer}.add-books-dialog__source:hover{border-color:var(--color-accent);background:var(--color-bg)}.add-books-dialog__source:focus-visible,.add-books-dialog__source:has(:focus-visible){outline:3px solid var(--color-accent);outline-offset:2px}.add-books-dialog__source-name{font-weight:600}.add-books-dialog__source-hint{font-size:.875em;color:var(--color-text-muted)}.add-books-dialog__input{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.status-message{display:grid;place-content:center;justify-items:center;gap:var(--space-3);min-block-size:60dvh;padding:var(--space-4);text-align:center}.status-message__text{margin:0;color:var(--color-text-muted)}.annotations-dialog{inline-size:min(100% - 2 * var(--space-4),40rem);max-block-size:calc(100dvh - 2 * var(--space-4));padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);background:var(--color-surface);box-shadow:var(--shadow);overscroll-behavior:contain}.annotations-dialog[open]{display:grid;align-content:start;gap:var(--space-4)}.annotations-dialog::backdrop{background:#00000073}.annotations-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.annotations-dialog__title{margin:0;font-size:1.25rem}.annotations-dialog__close{display:grid;place-items:center;inline-size:var(--tap-size);block-size:var(--tap-size);margin:calc(-1 * var(--space-2));padding:0;border:0;border-radius:50%;font-size:1.25rem;line-height:1;color:var(--color-text-muted);background:transparent;cursor:pointer}.annotations-dialog__close:hover{color:var(--color-text);background:var(--color-bg)}.annotations-dialog__search{display:grid;gap:var(--space-2)}.annotations-dialog__count{margin:0;font-size:.875em;color:var(--color-text-muted)}.annotations-dialog__empty{margin:0;padding:var(--space-5);border:2px dashed var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-muted);text-align:center}.annotations-dialog__groups{display:grid;gap:var(--space-5)}.annotations-dialog__group{display:grid;gap:var(--space-2)}.annotations-dialog__book{display:grid;margin:0;font-size:1rem}.annotations-dialog__author{font-size:.875em;font-weight:400;color:var(--color-text-muted)}.annotations-dialog__list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}.annotations-dialog__item{display:grid;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-inline-start:4px solid var(--swatch)}.annotations-dialog__excerpt{display:-webkit-box;margin:0;overflow:hidden;color:inherit;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}a.annotations-dialog__excerpt{text-decoration-color:color-mix(in srgb,currentcolor 35%,transparent);text-underline-offset:.2em}a.annotations-dialog__excerpt:hover{color:var(--color-primary)}.annotations-dialog__note{margin:0;font-size:.875em;font-style:italic;white-space:pre-line;color:var(--color-text-muted)}.app-theme-menu__button{anchor-name:--app-theme-menu;font-size:var(--font-size-lg)}.app-theme-menu{position-anchor:--app-theme-menu;position-area:block-end span-inline-start;position-try-fallbacks:flip-block;min-inline-size:13rem;margin:var(--space-1) 0;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);background:var(--color-surface);box-shadow:var(--shadow)}.app-theme-menu__group{margin:0;padding:0;border:0}.app-theme-menu__legend{padding:0;font-weight:600}.app-theme-menu__choice{display:flex;align-items:center;gap:var(--space-2);min-block-size:var(--tap-size);cursor:pointer}.app-theme-menu__choice input{inline-size:1.25rem;block-size:1.25rem;accent-color:var(--color-primary)}.confirm-dialog{inline-size:min(100% - 2 * var(--space-4),26rem);padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);background:var(--color-surface);box-shadow:var(--shadow)}.confirm-dialog::backdrop{background:#00000073}.confirm-dialog__title{margin-block:0 var(--space-3);font-size:var(--font-size-lg)}.confirm-dialog__body>*{margin-block:0 var(--space-4)}.confirm-dialog__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}.collection-item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3)}.collection-item__link{display:grid;flex:1 1 12rem;min-block-size:var(--tap-size);align-content:center;color:inherit;text-decoration:none}.collection-item__link:hover .collection-item__name{text-decoration:underline}.collection-item__name{font-weight:600;overflow-wrap:anywhere}.collection-item__count{font-size:.875em;color:var(--color-text-muted)}.collection-item__actions{display:flex;flex-wrap:wrap}.collection-item__delete{color:var(--color-danger)}.collection-item__rename{display:flex;flex-wrap:wrap;flex:1;align-items:end;gap:var(--space-2)}.collection-item__name-field{flex:1 1 12rem}.collection-item__error{flex-basis:100%;margin:0;font-size:.875em;color:var(--color-danger)}.collections-dialog{inline-size:min(100% - 2 * var(--space-4),36rem);max-block-size:calc(100dvh - 2 * var(--space-4));padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);background:var(--color-surface);box-shadow:var(--shadow)}.collections-dialog[open]{display:grid;align-content:start;gap:var(--space-4)}.collections-dialog::backdrop{background:#00000073}.collections-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.collections-dialog__title{margin:0;font-size:1.25rem}.collections-dialog__close{display:grid;place-items:center;inline-size:var(--tap-size);block-size:var(--tap-size);margin:calc(-1 * var(--space-2));padding:0;border:0;border-radius:50%;font-size:1.25rem;line-height:1;color:var(--color-text-muted);background:transparent;cursor:pointer}.collections-dialog__close:hover{color:var(--color-text);background:var(--color-bg)}.collections-dialog__create{display:flex;flex-wrap:wrap;align-items:end;gap:var(--space-3)}.collections-dialog__name{flex:1 1 14rem}.collections-dialog__error{flex-basis:100%;margin:0;color:var(--color-danger)}.collections-dialog__empty{margin:0;padding:var(--space-5);border:2px dashed var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-muted);text-align:center}.collections-dialog__list{display:grid;margin:0;padding:0;list-style:none;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.collections-dialog__list>li+li{border-block-start:1px solid var(--color-border)}.app-layout{display:grid;grid-template-rows:auto auto 1fr;min-block-size:100dvh}.app-layout__header{position:sticky;inset-block-start:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-block:var(--space-2);padding-inline:max(var(--space-4),env(safe-area-inset-left),calc((100% - var(--content-max-width)) / 2 + var(--space-4))) max(var(--space-4),env(safe-area-inset-right),calc((100% - var(--content-max-width)) / 2 + var(--space-4)));padding-block-start:max(var(--space-2),env(safe-area-inset-top));border-block-end:1px solid var(--color-border);background:var(--color-surface)}.app-layout__brand{display:inline-grid;place-items:center;min-inline-size:var(--tap-size);min-block-size:var(--tap-size);border-radius:var(--radius-md)}.app-layout__brand img{border-radius:var(--radius-sm)}.app-layout__actions{display:flex;align-items:center;gap:var(--space-1)}.app-layout__menu-button{anchor-name:--app-layout-menu;font-size:var(--font-size-lg)}.app-layout__menu{position-anchor:--app-layout-menu;position-area:block-end span-inline-start;position-try-fallbacks:flip-block;min-inline-size:13rem;margin:var(--space-1) 0;padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);background:var(--color-surface);box-shadow:var(--shadow)}.app-layout__nav{display:flex;flex-direction:column;gap:var(--space-1)}.app-layout__menu-separator{margin-block:var(--space-2);border:0;border-block-start:1px solid var(--color-border)}.app-layout__logout{inline-size:100%;justify-content:flex-start;padding-inline:var(--space-3)}@media(min-width:40rem){.app-layout__menu-button,.app-layout__menu-separator{display:none}.app-layout__menu{display:contents}.app-layout__nav{flex-direction:row;order:1;margin-inline-end:auto}.app-layout__actions{order:2}.app-layout__logout{order:3;inline-size:auto;padding-inline:var(--space-4)}}.app-layout__nav-link{display:inline-flex;align-items:center;min-block-size:var(--tap-size);padding-inline:var(--space-3);border:0;border-radius:var(--radius-md);font:inherit;font-weight:600;color:var(--color-text-muted);background:transparent;text-decoration:none;cursor:pointer}.app-layout__nav-link:hover:not(:disabled){color:var(--color-text);background:var(--color-bg)}.app-layout__nav-link:disabled{opacity:.6;cursor:not-allowed}.app-layout__main{inline-size:100%;max-inline-size:var(--content-max-width);margin-inline:auto;padding:var(--space-4)}.app-layout__offline{margin:0;padding-block:var(--space-2);padding-inline:max(var(--space-4),env(safe-area-inset-left)) max(var(--space-4),env(safe-area-inset-right));font-size:.875em;text-align:center;color:var(--color-text);background:var(--color-bg);border-block-end:1px solid var(--color-border)}.app-layout__drop-hint{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding:var(--space-5);background:color-mix(in srgb,var(--color-bg) 80%,transparent);pointer-events:none}.app-layout__drop-hint p{margin:0;padding:var(--space-5);border:3px dashed var(--color-primary);border-radius:var(--radius-lg);font-size:var(--font-size-lg);font-weight:600;text-align:center;background:var(--color-surface)}.app-update-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-content:center;justify-items:center;gap:var(--space-4);padding:var(--space-4);color:var(--color-text);background:var(--color-bg);text-align:center}.app-update-overlay__spinner{--spinner-size: 3rem;--spinner-width: 4px}.app-update-overlay__text{margin:0;color:var(--color-text-muted)}
