---

            :root {
                --ink: #1c1712;
                --surface: #241d17;
                --surface-2: #2c231c;
                --line: #3a3026;
                --paper: #ece4d3;
                --muted: #a89a84;
                --muted-dim: #6f6353;
                --gold: #c9a227;
                --gold-dim: rgba(201, 162, 39, 0.14);
                --wine: #8a3a3a;

                --font-display: 'Lora', Georgia, serif;
                --font-body: 'Inter', system-ui, sans-serif;
                --font-mono: 'IBM Plex Mono', monospace;

                --radius: 12px;
            }

            * {
                box-sizing: border-box;
            }

            body {
                margin: 0;
                background: var(--ink);
                color: var(--paper);
                font-family: var(--font-body);
                font-size: 14px;
                line-height: 1.5;
                -webkit-font-smoothing: antialiased;
                display: flex;
                justify-content: center;
                padding: 48px 20px 80px;
            }

            .app {
                width: 100%;
                max-width: 560px;
            }

            .app-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 24px;
            }

            .brand {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .brand-mark {
                width: 30px;
                height: 30px;
                border-radius: 8px;
                background: linear-gradient(160deg, var(--gold), #9c7a1a);
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: var(--font-display);
                font-weight: 600;
                color: #1c1712;
                font-size: 15px;
            }

            .brand-name {
                font-family: var(--font-display);
                font-size: 19px;
                font-weight: 500;
            }

            .view-switch {
                display: inline-flex;
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: 999px;
                padding: 3px;
            }

            .view-btn {
                border: none;
                background: none;
                color: var(--muted);
                font-family: var(--font-body);
                font-size: 12.5px;
                font-weight: 600;
                padding: 7px 14px;
                border-radius: 999px;
                cursor: pointer;
            }

            .view-btn.active {
                background: var(--gold);
                color: #1c1712;
            }

            .screen {
                display: none;
            }
            .screen.active {
                display: block;
            }

            .greeting {
                font-family: var(--font-display);
                font-size: 22px;
                font-style: italic;
                color: var(--paper);
                margin: 0 0 4px;
            }

            .greeting-sub {
                color: var(--muted);
                font-size: 13px;
                margin: 0 0 24px;
            }

            .add-book-row {
                display: flex;
                gap: 8px;
                margin-bottom: 18px;
            }

            .input {
                flex: 1;
                background: var(--surface);
                border: 1px solid var(--line);
                color: var(--paper);
                padding: 11px 14px;
                border-radius: var(--radius);
                font-size: 13.5px;
                font-family: inherit;
            }
            .input::placeholder {
                color: var(--muted-dim);
            }
            .input:focus {
                outline: none;
                border-color: var(--gold);
            }

            .btn {
                background: var(--gold);
                color: #1c1712;
                border: none;
                padding: 11px 18px;
                border-radius: var(--radius);
                font-size: 13.5px;
                font-weight: 600;
                cursor: pointer;
                white-space: nowrap;
            }
            .btn:hover {
                filter: brightness(1.08);
            }

            .btn.ghost {
                background: none;
                border: 1px solid var(--line);
                color: var(--paper);
            }
            .btn.ghost:hover {
                border-color: var(--gold);
                color: var(--gold);
            }

            .list-toolbar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 12px;
            }

            .toolbar-title {
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: var(--muted-dim);
            }

            .filter-chip {
                position: relative;
            }

            .filter-chip input {
                position: absolute;
                opacity: 0;
                width: 0;
                height: 0;
            }

            .filter-chip label {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-size: 12.5px;
                color: var(--muted);
                background: var(--surface);
                border: 1px solid var(--line);
                padding: 6px 12px;
                border-radius: 999px;
                cursor: pointer;
                user-select: none;
            }

            .filter-chip input:checked + label {
                background: var(--gold-dim);
                border-color: var(--gold);
                color: var(--gold);
            }

            .filter-chip .dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--muted-dim);
            }
            .filter-chip input:checked + label .dot {
                background: var(--gold);
            }

            .book-list {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .empty-note {
                color: var(--muted-dim);
                font-size: 13px;
                text-align: center;
                padding: 30px 0;
                border: 1px dashed var(--line);
                border-radius: var(--radius);
            }

            .book-row {
                display: flex;
                align-items: center;
                gap: 13px;
                padding: 11px 12px;
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: var(--radius);
            }

            .book-cover {
                width: 34px;
                height: 48px;
                border-radius: 4px;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: var(--font-display);
                font-weight: 600;
                font-size: 15px;
                color: rgba(255, 255, 255, 0.85);
            }

            .book-info {
                flex: 1;
                min-width: 0;
            }

            .book-title {
                font-family: var(--font-display);
                font-size: 14.5px;
                margin: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .book-title.done {
                color: var(--muted);
            }

            .book-author {
                font-size: 12px;
                color: var(--muted-dim);
                margin-top: 1px;
            }

            .read-check {
                display: flex;
                align-items: center;
                gap: 7px;
                cursor: pointer;
                flex-shrink: 0;
            }

            .check-circle {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 1.5px solid var(--muted-dim);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 11px;
                color: transparent;
            }

            .read-check.checked .check-circle {
                background: var(--gold);
                border-color: var(--gold);
                color: #1c1712;
            }

            .read-label {
                font-size: 11.5px;
                color: var(--muted-dim);
            }

            .delete-btn {
                border: none;
                background: none;
                color: var(--muted-dim);
                font-size: 14px;
                cursor: pointer;
                width: 24px;
                height: 24px;
                border-radius: 6px;
                flex-shrink: 0;
            }
            .delete-btn:hover {
                color: var(--wine);
                background: rgba(138, 58, 58, 0.15);
            }

            .stats-row {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                margin-bottom: 26px;
            }

            .stat-card {
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: var(--radius);
                padding: 16px 10px;
                text-align: center;
            }

            .stat-value {
                font-family: var(--font-mono);
                font-size: 24px;
                font-weight: 500;
                color: var(--gold);
            }

            .stat-label {
                font-size: 11.5px;
                color: var(--muted);
                margin-top: 3px;
            }

            .session-card {
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: var(--radius);
                padding: 22px;
            }

            .session-title {
                font-family: var(--font-display);
                font-size: 16px;
                margin: 0 0 3px;
            }

            .session-sub {
                font-size: 12.5px;
                color: var(--muted);
                margin: 0 0 18px;
            }

            .counter-row {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 20px;
                margin-bottom: 16px;
            }

            .counter-btn {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                border: 1px solid var(--line);
                background: var(--surface-2);
                color: var(--paper);
                font-size: 18px;
                cursor: pointer;
            }
            .counter-btn:hover {
                border-color: var(--gold);
                color: var(--gold);
            }
            .counter-btn:disabled {
                opacity: 0.35;
                cursor: not-allowed;
            }

            .counter-value {
                font-family: var(--font-mono);
                font-size: 30px;
                min-width: 60px;
                text-align: center;
            }

            .counter-reset {
                display: block;
                margin: 0 auto;
            }