html {
    color-scheme: light;
    --rv-bg: #f6f7f8;
    --rv-surface: #ffffff;
    --rv-surface-2: #f8fafb;
    --rv-surface-3: #f1f4f6;
    --rv-surface-hover: rgba(255, 255, 255, 0.72);
    --rv-text: #18202a;
    --rv-text-strong: #101820;
    --rv-text-soft: #24313a;
    --rv-muted: #667986;
    --rv-muted-2: #42515d;
    --rv-border: #d9e0e6;
    --rv-border-soft: #edf0f3;
    --rv-input-border: #cfd7df;
    --rv-link: #1d65d8;
    --rv-accent: #2f6f67;
    --rv-accent-soft: #e8f5f3;
    --rv-accent-text: #19564f;
    --rv-danger: #9f1f2f;
    --rv-danger-soft: #fff0f2;
    --rv-focus: #8db3d8;
    --rv-topbar-bg: rgba(255, 255, 255, 0.94);
    --rv-shadow: 0 10px 24px rgba(16, 24, 32, 0.12);
    --rv-tag-bg: #fff6d7;
    --rv-tag-border: #d8c58c;
    --rv-tag-text: #65500d;
    --rv-ref-bg: #e8f5f3;
    --rv-ref-border: #b9d9d5;
    --rv-ref-text: #19564f;
    --rv-block-ref-bg: #eef3ff;
    --rv-block-ref-border: #c8d2ef;
    --rv-block-ref-text: #28436e;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --rv-bg: #101418;
    --rv-surface: #171d22;
    --rv-surface-2: #1d252b;
    --rv-surface-3: #222c33;
    --rv-surface-hover: rgba(255, 255, 255, 0.06);
    --rv-text: #e8eef3;
    --rv-text-strong: #f6f8fa;
    --rv-text-soft: #d8e0e6;
    --rv-muted: #9aa8b3;
    --rv-muted-2: #b0bdc7;
    --rv-border: #2d3942;
    --rv-border-soft: #253039;
    --rv-input-border: #3a4853;
    --rv-link: #80b5ff;
    --rv-accent: #5fb4aa;
    --rv-accent-soft: #173832;
    --rv-accent-text: #9be1d7;
    --rv-danger: #ff9ba7;
    --rv-danger-soft: #361c23;
    --rv-focus: #72a7e8;
    --rv-topbar-bg: rgba(16, 20, 24, 0.94);
    --rv-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
    --rv-tag-bg: #3c3217;
    --rv-tag-border: #7b6423;
    --rv-tag-text: #ffd978;
    --rv-ref-bg: #173832;
    --rv-ref-border: #347d73;
    --rv-ref-text: #9be1d7;
    --rv-block-ref-bg: #1c2d48;
    --rv-block-ref-border: #446aa5;
    --rv-block-ref-text: #b6d2ff;
}

html,
body {
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--rv-bg);
    color: var(--rv-text);
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.inline-reference-row:focus-visible,
.reference-expand-button:focus-visible {
    outline: 2px solid #2f6f67;
    outline-offset: 2px;
}

a,
.btn-link {
    color: #1d65d8;
}

.content {
    padding-top: 0;
}

.landing-shell .content {
    padding-inline: clamp(1rem, 4vw, 2rem);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    color: white;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.loading-surface {
    display: grid;
    min-height: 18rem;
    place-items: center;
    color: #61717c;
}

.sync-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rv-muted);
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-dot {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: #2f9e44;
    box-shadow: 0 0 0 3px rgba(47, 158, 68, 0.15);
}

.drive-backup-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rv-muted);
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
}

.drive-status-main {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.drive-status-detail {
    color: var(--rv-muted);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.35;
    white-space: normal;
}

.drive-status-dot {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: #8a98a4;
    box-shadow: 0 0 0 3px rgba(138, 152, 164, 0.14);
}

.drive-backup-status.is-queued .drive-status-dot {
    background: #d99a1e;
    box-shadow: 0 0 0 3px rgba(217, 154, 30, 0.16);
}

.drive-backup-status.is-syncing .drive-status-dot {
    background: #1d65d8;
    box-shadow: 0 0 0 3px rgba(29, 101, 216, 0.16);
}

.drive-backup-status.is-saved .drive-status-dot,
.drive-backup-status.is-idle .drive-status-dot {
    background: #2f9e44;
    box-shadow: 0 0 0 3px rgba(47, 158, 68, 0.15);
}

.drive-backup-status.is-warning .drive-status-dot,
.drive-backup-status.is-unavailable .drive-status-dot {
    background: #b73748;
    box-shadow: 0 0 0 3px rgba(183, 55, 72, 0.16);
}

.landing-panel .drive-backup-status {
    display: grid;
    justify-self: start;
    max-width: 100%;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: var(--rv-surface-2);
    padding: 0.55rem 0.7rem;
}

.notebook-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 1320px;
    margin: 0 auto;
    padding: 1.25rem 0 2rem;
}

.notebook-main {
    min-width: 0;
}

.page-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 2.4rem;
    margin-bottom: 0.4rem;
}

.toolbar-history-slot {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.icon-button,
.toolbar-button {
    height: 2.25rem;
    border: 1px solid #cfd7df;
    border-radius: 6px;
    background: #ffffff;
    color: #22303a;
    box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04);
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.icon-button {
    width: 2.25rem;
    font-weight: 800;
}

.toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.icon-button.is-active,
.toolbar-button.is-active {
    border-color: #2f6f67;
    background: #e8f5f3;
    color: #19564f;
}

.icon-button:hover,
.toolbar-button:hover {
    border-color: #aebbc5;
    background: #f8fafb;
}

.icon-button.is-active:hover,
.toolbar-button.is-active:hover {
    border-color: #2f6f67;
    background: #dff1ee;
}

.toolbar-button.danger {
    color: #9f1f2f;
}

.toolbar-button.danger.is-active {
    border-color: #b73748;
    background: #fff0f2;
    color: #8f1727;
}

.page-header {
    padding: 0.4rem 0 1rem;
}

.page-kind {
    color: #667986;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.page-header h1 {
    margin: 0.1rem 0 0.3rem;
    color: #101820;
    font-size: clamp(2rem, 4vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.page-title-input {
    display: block;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #101820;
    font-size: clamp(2rem, 4vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: 0;
    padding: 0.05rem 0.2rem;
}

.page-title-input:focus {
    outline: none;
    border-color: #8db3d8;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(29, 101, 216, 0.12);
}

.page-meta {
    color: #667986;
    font-size: 0.92rem;
}

.daily-feed-page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 1.2rem 0 4rem;
}

.daily-feed-toolbar {
    position: sticky;
    top: 3.5rem;
    z-index: 1;
    width: 100%;
    margin-bottom: 1.45rem;
    padding: 0.5rem 0;
    background: rgba(246, 247, 248, 0.94);
    backdrop-filter: blur(8px);
}

.notebook-page-toolbar {
    position: sticky;
    top: 3.5rem;
    z-index: 1;
    padding: 0.5rem 0;
    background: rgba(246, 247, 248, 0.94);
    backdrop-filter: blur(8px);
}

.daily-feed-list {
    display: grid;
    gap: 4.8rem;
}

.daily-note-section {
    min-height: 24rem;
    scroll-margin-top: 5.5rem;
    border-radius: 8px;
    transition: background 0.14s ease, box-shadow 0.14s ease;
}

.daily-note-section.is-day-drop-target {
    background: rgba(47, 111, 103, 0.06);
    box-shadow: inset 0 0 0 2px rgba(47, 111, 103, 0.34);
}

.daily-note-header {
    margin-bottom: 1.2rem;
}

.daily-note-title {
    display: block;
    border: 0;
    background: transparent;
    color: #101820;
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1.05;
    padding: 0;
    text-align: left;
}

.daily-note-title:hover {
    color: #1d65d8;
}

.daily-note-weekday {
    margin-top: 0.15rem;
    color: #42515d;
    font-size: 0.95rem;
}

.daily-block-list {
    max-width: 100%;
}

.daily-feed-sentinel,
.daily-feed-end {
    display: grid;
    min-height: 6rem;
    place-items: center;
    color: #73828e;
}

.daily-feed-end {
    font-size: 0.88rem;
}

.landing-page {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.88fr);
    gap: clamp(2rem, 6vw, 4.5rem);
    align-items: center;
    max-width: 1200px;
    min-height: calc(100vh - 3.5rem);
    margin: 0 auto;
    padding: 3rem 0;
}

.landing-copy {
    display: grid;
    justify-items: start;
}

.landing-copy h1 {
    max-width: 11ch;
    margin: 0 0 0.55rem;
    color: var(--rv-text-strong);
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.brand-mark {
    display: grid;
    width: 4.15rem;
    height: 4.15rem;
    margin-bottom: 0.95rem;
    place-items: center;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: var(--rv-surface);
    box-shadow: var(--rv-shadow);
    font-size: 2.35rem;
    line-height: 1;
}

.landing-eyebrow {
    margin-bottom: 0.45rem;
    color: var(--rv-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.landing-slogan {
    margin: 0 0 0.65rem;
    color: var(--rv-text-strong);
    font-size: 1.08rem;
    font-weight: 850;
}

.landing-copy p,
.landing-panel p,
.landing-note {
    color: var(--rv-muted);
    line-height: 1.55;
}

.landing-copy p {
    max-width: 43rem;
    font-size: 1.05rem;
}

.landing-summary {
    margin: 0;
}

.drive-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.38rem;
    margin-left: 0.12rem;
    white-space: nowrap;
    vertical-align: -0.22rem;
}

.drive-inline svg {
    display: block;
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
}

.landing-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.35rem;
}

.landing-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border: 1px solid var(--rv-border);
    border-radius: 999px;
    background: var(--rv-surface);
    color: var(--rv-text-soft);
    padding: 0 0.7rem;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
}

.landing-legal-links {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    justify-content: center;
    justify-self: center;
    gap: 0.65rem 1.2rem;
    margin-top: clamp(0.5rem, 2vw, 1.35rem);
}

.landing-legal-links a {
    color: var(--rv-muted);
    font-size: 0.88rem;
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.landing-legal-links a:hover {
    color: var(--rv-text-strong);
}

.landing-panel {
    display: grid;
    gap: 1.2rem;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: var(--rv-surface);
    box-shadow: var(--rv-shadow);
    padding: 1.3rem;
}

.landing-panel-label {
    color: var(--rv-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.landing-panel h2 {
    margin: 0.15rem 0 0.35rem;
    color: var(--rv-text-strong);
    font-size: 1.55rem;
    line-height: 1.1;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.landing-actions form {
    margin: 0;
}

.checkout-form {
    display: grid;
    width: 100%;
    gap: 0.85rem;
}

.paid-checkout {
    width: 100%;
    border-top: 1px solid var(--rv-border);
    padding-top: 0.7rem;
}

.paid-checkout summary {
    color: var(--rv-link);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 900;
}

.paid-checkout[open] summary {
    margin-bottom: 0.75rem;
}

.billing-plans {
    display: grid;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    gap: 0.55rem;
}

.billing-plans legend {
    margin-bottom: 0.45rem;
    color: var(--rv-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.billing-plan {
    display: grid;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    border: 1px solid var(--rv-border);
    border-radius: 7px;
    background: var(--rv-surface-2);
    padding: 0.72rem;
    cursor: pointer;
}

.billing-plan:has(input:checked) {
    border-color: #f0b429;
    box-shadow: 0 0 0 1px rgba(240, 180, 41, 0.28);
}

.billing-plan input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.22rem;
    accent-color: #f0b429;
}

.billing-plan-copy {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
}

.billing-plan-topline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem;
    color: var(--rv-text-strong);
    font-weight: 900;
}

.billing-plan-topline strong {
    color: #c18705;
}

[data-theme="dark"] .billing-plan-topline strong {
    color: #ffd36a;
}

.billing-plan-name,
.billing-plan-detail {
    color: var(--rv-muted);
    font-size: 0.86rem;
    line-height: 1.35;
}

.promo-code-field {
    display: grid;
    gap: 0.35rem;
    color: var(--rv-muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.promo-code-field input {
    width: 100%;
    min-height: 2.45rem;
    border: 1px solid var(--rv-input-border);
    border-radius: 6px;
    background: var(--rv-input-bg);
    color: var(--rv-text);
    padding: 0 0.8rem;
    font: inherit;
}

.promo-code-field input:focus {
    border-color: var(--rv-accent);
    box-shadow: 0 0 0 3px var(--rv-focus);
    outline: 0;
}

.landing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    border: 1px solid var(--rv-input-border);
    border-radius: 6px;
    background: var(--rv-surface-2);
    color: var(--rv-text);
    padding: 0 0.9rem;
    font-weight: 850;
    text-decoration: none;
}

.landing-button:hover {
    border-color: var(--rv-accent);
    color: var(--rv-accent-text);
}

.landing-button.primary {
    border-color: #f0b429;
    background: #f0b429;
    color: #1d2328;
}

.landing-button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.landing-button.quiet {
    background: transparent;
}

.pwa-install-control {
    display: inline-grid;
    min-width: 0;
    gap: 0.35rem;
}

.pwa-install-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pwa-install-message {
    color: var(--rv-muted);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.35;
}

.pwa-install-message:empty,
.nav-install-message:empty,
.settings-install-message:empty {
    display: none;
}

.nav-install-item {
    font-size: 0.9rem;
    padding-bottom: 0.35rem;
}

.nav-dismissible-row {
    position: relative;
    display: block;
}

.nav-dismissible-row .nav-link,
.nav-dismissible-row .nav-install-button {
    min-width: 0;
    padding-right: 2.85rem;
}

.nav-dismiss-button {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    z-index: 2;
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #91a0a8;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-50%);
    opacity: 0.72;
}

.nav-dismiss-button:hover,
.nav-dismiss-button:focus-visible {
    border-color: rgba(240, 180, 41, 0.55);
    background: rgba(240, 180, 41, 0.14);
    color: #ffffff;
}

.nav-install-button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.5rem;
    border: 1px solid rgba(240, 180, 41, 0.35);
    border-radius: 6px;
    background: rgba(240, 180, 41, 0.08);
    color: #dfe5e9;
    line-height: 1.2;
    padding: 0.55rem 0.75rem;
    text-align: left;
}

.nav-install-button:hover,
.nav-install-button:focus-visible {
    border-color: #f0b429;
    background: rgba(240, 180, 41, 0.18);
    color: #ffffff;
}

.nav-install-button:disabled {
    cursor: wait;
    opacity: 0.68;
}

.nav-install-message {
    display: block;
    color: #aeb8bd;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
    padding: 0.25rem 0.75rem 0;
}

.nav-install-item.is-showing-instructions .nav-install-message,
.pwa-install-control.is-showing-instructions .pwa-install-message {
    color: #dfe5e9;
}

body.pwa-install-modal-open {
    overflow: hidden;
}

.pwa-install-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    background: rgba(9, 12, 16, 0.72);
    padding: 1rem;
}

.pwa-install-modal {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13.5rem, 0.7fr);
    gap: clamp(1rem, 4vw, 2rem);
    align-items: center;
    width: min(46rem, 100%);
    max-height: min(42rem, calc(100dvh - 2rem));
    overflow: auto;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: var(--rv-surface);
    color: var(--rv-text);
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.34);
    padding: clamp(1rem, 4vw, 1.5rem);
}

.pwa-install-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--rv-border);
    border-radius: 6px;
    background: var(--rv-surface-2);
    color: var(--rv-text);
}

.pwa-install-modal-close::before,
.pwa-install-modal-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.95rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.pwa-install-modal-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.pwa-install-modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.pwa-install-modal-close:hover,
.pwa-install-modal-close:focus-visible {
    border-color: #f0b429;
    color: #f0b429;
}

.pwa-install-modal-copy {
    display: grid;
    gap: 0.85rem;
    padding-right: 1.7rem;
}

.pwa-install-modal-kicker {
    margin: 0;
    color: var(--rv-muted);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pwa-install-modal h2 {
    margin: 0;
    font-size: clamp(1.65rem, 4vw, 2.25rem);
    line-height: 1.05;
}

.pwa-install-steps {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding-left: 1.35rem;
    color: var(--rv-text);
    font-weight: 750;
    line-height: 1.4;
}

.pwa-install-modal-note {
    margin: 0;
    border-left: 3px solid #f0b429;
    color: var(--rv-muted);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    padding-left: 0.75rem;
}

.pwa-ios-phone {
    position: relative;
    justify-self: center;
    width: min(15rem, 100%);
    aspect-ratio: 9 / 17.5;
    border: 0.55rem solid #14181d;
    border-radius: 1.75rem;
    background: #14181d;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.28);
}

.pwa-ios-speaker {
    position: absolute;
    top: 0.55rem;
    left: 50%;
    width: 3rem;
    height: 0.35rem;
    border-radius: 999px;
    background: #2b3138;
    transform: translateX(-50%);
    z-index: 2;
}

.pwa-ios-screen {
    position: absolute;
    inset: 0.25rem;
    overflow: hidden;
    border-radius: 1.25rem;
    background: #f5f7fa;
    color: #1d2328;
}

.pwa-ios-address {
    margin: 1.25rem 0.65rem 0;
    border-radius: 999px;
    background: #e1e6ec;
    color: #35414d;
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1;
    padding: 0.55rem 0.65rem;
    text-align: center;
}

.pwa-ios-page {
    display: grid;
    gap: 0.5rem;
    margin: 0.85rem 0.8rem 0;
    border: 1px solid #d8dee6;
    border-radius: 8px;
    background: #ffffff;
    padding: 0.85rem;
}

.pwa-ios-app-mark {
    color: #1d2328;
    font-size: 0.86rem;
    font-weight: 900;
}

.pwa-ios-line {
    width: 72%;
    height: 0.45rem;
    border-radius: 999px;
    background: #d8dee6;
}

.pwa-ios-line-wide {
    width: 100%;
}

.pwa-ios-toolbar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 3.2rem;
    border-top: 1px solid #d8dee6;
    background: rgba(248, 250, 252, 0.96);
}

.pwa-ios-tool {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 8px;
}

.pwa-ios-share {
    background: #f0b429;
    box-shadow: 0 0 0 0.35rem rgba(240, 180, 41, 0.22);
}

.pwa-ios-share-box {
    width: 0.9rem;
    height: 0.8rem;
    border: 2px solid #1d2328;
    border-top: 0;
    border-radius: 0 0 3px 3px;
}

.pwa-ios-share-arrow {
    position: absolute;
    top: 0.36rem;
    left: 50%;
    width: 0.48rem;
    height: 0.9rem;
    border-left: 2px solid #1d2328;
    transform: translateX(-50%);
}

.pwa-ios-share-arrow::before {
    content: "";
    position: absolute;
    top: 0;
    left: -0.28rem;
    width: 0.55rem;
    height: 0.55rem;
    border-top: 2px solid #1d2328;
    border-left: 2px solid #1d2328;
    transform: rotate(45deg);
}

.pwa-ios-back::before {
    content: "";
    width: 0.8rem;
    height: 0.8rem;
    border-bottom: 2px solid #697586;
    border-left: 2px solid #697586;
    transform: rotate(45deg);
}

.pwa-ios-tabs::before {
    content: "";
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid #697586;
    border-radius: 3px;
    box-shadow: 0.22rem -0.22rem 0 -1px #f8fafc, 0.22rem -0.22rem 0 0 #697586;
}

.pwa-ios-sheet {
    position: absolute;
    right: 0.55rem;
    bottom: 3.65rem;
    left: 0.55rem;
    display: grid;
    gap: 0.45rem;
    border: 1px solid #d4dbe4;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 0.65rem 1.6rem rgba(31, 41, 55, 0.2);
    padding: 0.55rem;
}

.pwa-ios-sheet-grip {
    justify-self: center;
    width: 2.35rem;
    height: 0.22rem;
    border-radius: 999px;
    background: #c8d0da;
}

.pwa-ios-sheet-row {
    display: grid;
    grid-template-columns: 1.45rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: center;
    min-height: 2rem;
    border-radius: 7px;
    color: #202a33;
    font-size: 0.66rem;
    font-weight: 850;
    padding: 0 0.45rem;
}

.pwa-ios-sheet-row-muted {
    color: #596676;
}

.pwa-ios-sheet-row-highlight {
    border: 1px solid rgba(240, 180, 41, 0.7);
    background: rgba(240, 180, 41, 0.18);
}

.pwa-ios-sheet-icon,
.pwa-ios-home-icon {
    width: 1.18rem;
    height: 1.18rem;
    border-radius: 5px;
    background: #e3e8ef;
}

.pwa-ios-home-icon {
    position: relative;
    background: #f0b429;
}

.pwa-ios-home-icon::before,
.pwa-ios-home-icon::after {
    content: "";
    position: absolute;
    background: #1d2328;
}

.pwa-ios-home-icon::before {
    top: 50%;
    left: 0.28rem;
    right: 0.28rem;
    height: 2px;
    transform: translateY(-50%);
}

.pwa-ios-home-icon::after {
    top: 0.28rem;
    bottom: 0.28rem;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
}

.pwa-install-modal-mac {
    grid-template-columns: minmax(0, 0.78fr) minmax(18rem, 1.1fr);
    width: min(58rem, 100%);
}

.pwa-mac-window {
    position: relative;
    justify-self: center;
    width: min(31rem, 100%);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid #343c46;
    border-radius: 8px;
    background: #090d13;
    color: #dfe5e9;
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.32);
}

.pwa-mac-titlebar {
    display: grid;
    grid-template-columns: minmax(4rem, 0.5fr) minmax(8rem, 1fr) minmax(5.5rem, 0.5fr);
    align-items: center;
    gap: 0.65rem;
    min-height: 2.75rem;
    border-bottom: 1px solid #242b33;
    background: #171c23;
    padding: 0 0.8rem;
}

.pwa-mac-traffic {
    display: flex;
    gap: 0.38rem;
}

.pwa-mac-traffic span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: #3b424c;
}

.pwa-mac-address {
    min-width: 0;
    border: 1px solid #303843;
    border-radius: 8px;
    background: #20262e;
    color: #f5f7fa;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
    overflow: hidden;
    padding: 0.55rem 0.8rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-mac-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
}

.pwa-mac-share,
.pwa-mac-plus,
.pwa-mac-tabs {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid #303843;
    border-radius: 6px;
    background: #20262e;
}

.pwa-mac-share {
    border-color: #f0b429;
    background: rgba(240, 180, 41, 0.18);
    box-shadow: 0 0 0 0.28rem rgba(240, 180, 41, 0.18);
}

.pwa-mac-share::after {
    content: "Share";
    position: absolute;
    top: 2.2rem;
    right: 50%;
    border-radius: 999px;
    background: #f0b429;
    color: #1d2328;
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1;
    padding: 0.32rem 0.45rem;
    transform: translateX(50%);
    white-space: nowrap;
}

.pwa-mac-share-box {
    width: 0.75rem;
    height: 0.65rem;
    border: 2px solid #f4f6f8;
    border-top: 0;
    border-radius: 0 0 3px 3px;
}

.pwa-mac-share-arrow {
    position: absolute;
    top: 0.38rem;
    left: 50%;
    width: 0.42rem;
    height: 0.78rem;
    border-left: 2px solid #f4f6f8;
    transform: translateX(-50%);
}

.pwa-mac-share-arrow::before {
    content: "";
    position: absolute;
    top: 0;
    left: -0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid #f4f6f8;
    border-left: 2px solid #f4f6f8;
    transform: rotate(45deg);
}

.pwa-mac-plus::before,
.pwa-mac-plus::after {
    content: "";
    position: absolute;
    background: #7d8794;
}

.pwa-mac-plus::before {
    width: 0.8rem;
    height: 2px;
}

.pwa-mac-plus::after {
    width: 2px;
    height: 0.8rem;
}

.pwa-mac-tabs::before {
    content: "";
    width: 0.72rem;
    height: 0.72rem;
    border: 2px solid #7d8794;
    border-radius: 3px;
    box-shadow: 0.18rem -0.18rem 0 -1px #20262e, 0.18rem -0.18rem 0 0 #7d8794;
}

.pwa-mac-content {
    display: grid;
    grid-template-columns: 5.6rem minmax(0, 1fr);
    height: calc(100% - 2.75rem);
}

.pwa-mac-sidebar {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    border-right: 1px solid #242b33;
    background: #1f2329;
    padding: 1rem 0.8rem;
}

.pwa-mac-sidebar span {
    height: 0.58rem;
    border-radius: 999px;
    background: #343b45;
}

.pwa-mac-page {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    padding: 2rem 2.2rem;
}

.pwa-mac-page-title {
    color: #f5f7fa;
    font-size: 1.05rem;
    font-weight: 900;
}

.pwa-mac-page-line {
    width: 60%;
    height: 0.55rem;
    border-radius: 999px;
    background: #303843;
}

.pwa-mac-page-line-wide {
    width: 88%;
}

.pwa-mac-menu {
    position: absolute;
    top: 3.55rem;
    right: 0.85rem;
    display: grid;
    gap: 0.35rem;
    width: min(13.5rem, calc(100% - 1.7rem));
    border: 1px solid #3b4652;
    border-radius: 8px;
    background: rgba(28, 34, 42, 0.98);
    box-shadow: 0 0.85rem 1.8rem rgba(0, 0, 0, 0.36);
    padding: 0.5rem;
}

.pwa-mac-menu-row {
    display: grid;
    grid-template-columns: 1.45rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: center;
    min-height: 2rem;
    border-radius: 7px;
    color: #dfe5e9;
    font-size: 0.75rem;
    font-weight: 850;
    padding: 0 0.5rem;
}

.pwa-mac-menu-row-highlight {
    border: 1px solid rgba(240, 180, 41, 0.72);
    background: rgba(240, 180, 41, 0.18);
    color: #ffffff;
}

.pwa-mac-menu-icon,
.pwa-mac-dock-icon {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 4px;
    background: #424c59;
}

.pwa-mac-dock-icon {
    position: relative;
    background: #f0b429;
}

.pwa-mac-dock-icon::before {
    content: "";
    position: absolute;
    inset: 0.28rem;
    border: 2px solid #1d2328;
    border-radius: 3px;
}

@media (max-width: 640px) {
    .pwa-install-modal {
        grid-template-columns: 1fr;
        gap: 1rem;
        align-items: start;
        width: min(26rem, 100%);
        padding-top: 3.4rem;
    }

    .pwa-install-modal-copy {
        order: 2;
        padding-right: 0;
    }

    .pwa-ios-phone {
        order: 1;
        width: min(12.5rem, 72vw);
    }

    .pwa-install-modal-mac {
        grid-template-columns: 1fr;
    }

    .pwa-mac-window {
        order: 1;
        width: 100%;
    }
}

.landing-status {
    border: 1px solid var(--rv-ref-border);
    border-radius: 7px;
    background: var(--rv-ref-bg);
    color: var(--rv-ref-text);
    padding: 0.75rem;
    font-weight: 750;
}

.landing-status.is-warning {
    border-color: var(--rv-tag-border);
    background: var(--rv-tag-bg);
    color: var(--rv-tag-text);
}

.landing-note {
    border-top: 1px solid var(--rv-border);
    padding-top: 0.9rem;
    font-size: 0.86rem;
}

.landing-note code {
    color: var(--rv-text);
    overflow-wrap: anywhere;
}

.access-gate {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    max-width: 1180px;
    min-height: calc(100vh - 8rem);
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3.25rem) 0;
}

.access-gate-copy {
    display: grid;
    gap: 1.05rem;
    min-width: 0;
}

.access-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    border: 1px solid var(--rv-border);
    border-radius: 999px;
    background: var(--rv-surface);
    color: var(--rv-text-soft);
    padding: 0.38rem 0.72rem;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.access-eyebrow span {
    font-size: 1rem;
    line-height: 1;
}

.access-gate h1 {
    max-width: 13ch;
    margin: 0;
    color: var(--rv-text-strong);
    font-size: clamp(2.55rem, 6vw, 5.15rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.access-lede {
    max-width: 42rem;
    margin: 0;
    color: var(--rv-muted-2);
    font-size: clamp(1.02rem, 1.7vw, 1.2rem);
    line-height: 1.55;
}

.access-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.access-feature {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    min-width: 0;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: var(--rv-surface);
    padding: 0.85rem;
}

.access-feature > span {
    display: inline-grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 999px;
    background: var(--rv-accent-soft);
    color: var(--rv-accent-text);
    font-size: 0.9rem;
    font-weight: 900;
}

.access-feature strong {
    color: var(--rv-text-strong);
    line-height: 1.25;
}

.access-feature p {
    margin: 0;
    color: var(--rv-muted);
    font-size: 0.86rem;
    line-height: 1.42;
}

.access-preview {
    display: grid;
    gap: 0.55rem;
    max-width: 34rem;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: var(--rv-surface);
    box-shadow: var(--rv-shadow);
    padding: 1rem;
}

.access-preview-bar {
    display: flex;
    gap: 0.32rem;
    margin-bottom: 0.2rem;
}

.access-preview-bar span {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: var(--rv-border);
}

.access-preview-title {
    color: var(--rv-text-strong);
    font-size: 1.25rem;
    font-weight: 900;
}

.access-preview-line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--rv-text-soft);
    line-height: 1.4;
}

.access-preview-line.is-indent {
    padding-left: 1.4rem;
}

.access-preview-line > span {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #7b8993;
    flex: 0 0 auto;
}

.access-preview mark {
    border: 1px solid var(--rv-tag-border);
    border-radius: 999px;
    background: var(--rv-tag-bg);
    color: var(--rv-tag-text);
    padding: 0 0.38rem;
    font-weight: 850;
}

.access-checkout {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.access-checkout-header {
    display: grid;
    gap: 0.35rem;
}

.access-checkout h2 {
    margin: 0;
    color: var(--rv-text-strong);
    font-size: clamp(1.8rem, 3.2vw, 2.55rem);
    line-height: 1.03;
}

.access-checkout p {
    margin: 0;
    color: var(--rv-muted);
    line-height: 1.5;
}

.access-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    border: 1px solid #f0b429;
    border-radius: 7px;
    background: #f0b429;
    color: #151b20;
    padding: 0 1rem;
    font-weight: 950;
}

.access-primary-action:hover {
    background: #f6c24d;
}

.access-plans {
    display: grid;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    gap: 0.65rem;
}

.access-plans legend {
    margin-bottom: 0.35rem;
    color: var(--rv-muted);
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.access-plan {
    display: grid;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    gap: 0.72rem;
    align-items: start;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: var(--rv-surface);
    padding: 0.85rem;
    cursor: pointer;
}

.access-plan:has(input:checked) {
    border-color: #f0b429;
    background: #fff9e8;
    box-shadow: 0 0 0 1px rgba(240, 180, 41, 0.35);
}

.access-plan input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.24rem;
    accent-color: #f0b429;
}

.access-plan-copy {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.access-plan-topline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.65rem;
    color: var(--rv-text-strong);
}

.access-plan-topline strong {
    font-size: 1.03rem;
    line-height: 1.2;
}

.access-plan-topline span {
    color: #b27800;
    font-weight: 950;
    white-space: nowrap;
}

.access-plan-name,
.access-plan-detail {
    color: var(--rv-muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.access-promo-field {
    margin-top: 0.1rem;
}

.access-fine-print {
    color: var(--rv-muted);
    font-size: 0.84rem;
}

.access-data-tools {
    display: grid;
    gap: 0.8rem;
    border: 1px solid var(--rv-border);
    border-radius: 10px;
    background: var(--rv-surface);
    padding: 1rem;
}

.access-data-tools h3 {
    margin: 0 0 0.25rem;
    color: var(--rv-text-strong);
    font-size: 1rem;
    line-height: 1.2;
}

.access-data-tools p {
    color: var(--rv-muted-2);
    font-size: 0.9rem;
}

.access-data-actions,
.access-delete-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.access-data-actions .toolbar-button,
.access-delete-actions .toolbar-button {
    justify-content: center;
}

.access-delete-panel {
    max-width: none;
}

.access-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    border-top: 1px solid var(--rv-border);
    padding-top: 0.9rem;
}

.access-footer-actions a {
    color: var(--rv-muted-2);
    font-size: 0.88rem;
    font-weight: 850;
    text-decoration: none;
}

.access-footer-actions a:hover {
    color: var(--rv-link);
}

.block-list {
    --block-indent-step: 1.73rem;
    display: grid;
    gap: 0.12rem;
}

.block-list.document-mode .block-bullet {
    visibility: hidden;
}

.block-row {
    --indent: 0;
    position: relative;
    display: grid;
    grid-template-columns: 1.35rem auto minmax(0, 1fr);
    align-items: start;
    column-gap: 0.35rem;
    min-height: 2.35rem;
    padding-left: calc(var(--indent) * var(--block-indent-step));
    border-radius: 7px;
}

.block-row.is-dragging {
    opacity: 0.45;
}

.block-row.is-drop-target {
    border-radius: 6px;
    background: rgba(47, 111, 103, 0.08);
}

.block-row.is-block-selected {
    border-radius: 6px;
    background: rgba(29, 101, 216, 0.1);
}

.block-row.is-block-selected .block-display {
    border-color: rgba(29, 101, 216, 0.22);
    background: rgba(255, 255, 255, 0.68);
}

.block-row.is-drop-target::before {
    content: "";
    position: absolute;
    left: calc(var(--drop-indent, var(--indent)) * var(--block-indent-step));
    right: 0.35rem;
    top: -0.1rem;
    height: 0.18rem;
    border-radius: 999px;
    background: #2f6f67;
}

.block-row.is-drop-target.is-drop-after::before {
    top: auto;
    bottom: -0.1rem;
}

.block-bullet {
    width: 1.35rem;
    height: 2.1rem;
    border: 0;
    background: transparent;
    position: relative;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.block-bullet:active {
    cursor: grabbing;
}

.block-bullet:hover::after {
    background: #2f6f67;
    box-shadow: 0 0 0 4px rgba(47, 111, 103, 0.13);
}

.block-bullet::after {
    content: "";
    position: absolute;
    top: 0.78rem;
    left: 0.42rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #6f7d87;
}

.todo-checkbox {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.46rem;
    accent-color: #2f6f67;
}

.block-body {
    grid-column: 2 / -1;
    min-width: 0;
}

.todo-checkbox + .block-body {
    grid-column: 3;
}

.block-input {
    display: block;
    width: 100%;
    min-height: 2.1rem;
    resize: none;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #1a232b;
    line-height: 1.55;
    padding: 0.28rem 0.45rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.block-input:hover {
    background: rgba(255, 255, 255, 0.65);
    border-color: #e1e6eb;
}

.block-input:focus {
    outline: none;
    background: #ffffff;
    border-color: #8db3d8;
    box-shadow: 0 0 0 3px rgba(29, 101, 216, 0.12), 0 6px 18px rgba(16, 24, 32, 0.06);
}

.block-input.is-uploading-media {
    border-color: #f3b51d;
    background: #fff8df;
}

.block-input.is-done {
    color: #71818e;
    text-decoration: line-through;
}

.block-display {
    width: 100%;
    min-height: 2.1rem;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #1a232b;
    line-height: 1.55;
    padding: 0.28rem 0.45rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.block-display:hover {
    background: rgba(255, 255, 255, 0.65);
    border-color: #e1e6eb;
}

.block-display:focus {
    outline: none;
    background: #ffffff;
    border-color: #8db3d8;
    box-shadow: 0 0 0 3px rgba(29, 101, 216, 0.12), 0 6px 18px rgba(16, 24, 32, 0.06);
}

.block-display.is-done {
    color: #71818e;
    text-decoration: line-through;
}

.block-display.is-empty {
    min-height: 2.1rem;
}

.block-text {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.inline-bold {
    color: #101820;
    font-weight: 800;
}

.inline-italic {
    font-style: italic;
}

.inline-strikethrough {
    color: var(--rv-muted);
    text-decoration: line-through;
    text-decoration-thickness: 0.1em;
}

.inline-code-block {
    display: block;
    max-width: min(100%, 58rem);
    margin: 0.45rem 0;
    overflow: hidden;
    border: 1px solid #d4dce4;
    border-radius: 8px;
    background: #111820;
    color: #eef4f8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.inline-code-block code {
    display: block;
    overflow-x: auto;
    padding: 0.85rem 1rem;
    color: inherit;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.88rem;
    line-height: 1.55;
    tab-size: 4;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
}

.inline-code-language {
    display: block;
    padding: 0.35rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.05);
    color: #aebac6;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.code-comment {
    color: #788996;
    font-style: italic;
}

.code-keyword {
    color: #82b6ff;
    font-weight: 700;
}

.code-number {
    color: #f6c56f;
}

.code-property,
.code-variable {
    color: #7dd3c7;
}

.code-string {
    color: #a8d672;
}

.inline-link {
    color: var(--rv-link);
    font-weight: 650;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

.inline-link:hover {
    color: var(--rv-link);
    text-decoration-thickness: 0.12em;
}

.suggestion-menu {
    display: grid;
    gap: 0.25rem;
    width: min(26rem, 100%);
    max-height: min(22rem, 48vh);
    margin: 0.2rem 0 0.45rem 0.45rem;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: var(--rv-surface);
    box-shadow: 0 14px 32px rgba(16, 24, 32, 0.14);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.4rem;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.suggestion-item {
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--rv-text);
    padding: 0.5rem 0.6rem;
    text-align: left;
    touch-action: manipulation;
    transition: background 120ms ease, color 120ms ease;
}

.suggestion-item-with-detail {
    display: grid;
    gap: 0.1rem;
}

.suggestion-item-with-detail strong {
    color: var(--rv-text-strong);
    font-size: 0.92rem;
    line-height: 1.2;
}

.suggestion-item-with-detail span {
    color: var(--rv-muted);
    font-size: 0.78rem;
    line-height: 1.3;
}

.suggestion-item:hover,
.suggestion-item.is-selected {
    background: #f1f4f6;
}

.date-command-picker,
.link-command-picker {
    display: grid;
    gap: 0.5rem;
    border: 1px solid var(--rv-border-soft);
    border-radius: 7px;
    background: var(--rv-surface-2);
    padding: 0.65rem;
}

.date-command-picker label,
.link-command-picker label {
    color: var(--rv-muted);
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.date-command-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.date-command-picker input,
.link-command-picker input {
    min-width: 11.5rem;
    min-height: 2.4rem;
    border: 1px solid var(--rv-input-border);
    border-radius: 6px;
    background: var(--rv-surface);
    color: var(--rv-text);
    padding: 0 0.6rem;
}

.date-command-picker input:focus,
.link-command-picker input:focus {
    outline: none;
    border-color: var(--rv-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rv-focus) 24%, transparent);
}

.link-command-picker {
    gap: 0.35rem;
}

.link-command-picker input {
    width: 100%;
}

.link-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 0.2rem;
}

.reference-chip,
.inline-reference {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border: 1px solid #b9d9d5;
    border-radius: 999px;
    background: #e8f5f3;
    color: #19564f;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
    padding: 0.12rem 0.45rem;
    text-decoration: none;
}

.inline-reference {
    margin: 0 0.12rem;
    vertical-align: baseline;
}

.inline-reference-cluster {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    max-width: 100%;
    margin: 0 0.12rem;
    vertical-align: baseline;
}

.inline-reference-cluster .inline-reference,
.inline-reference-cluster .inline-reference-open {
    margin: 0;
}

.inline-reference-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 0.1rem 0 0;
    border: 1px solid var(--rv-border);
    border-radius: 999px;
    background: var(--rv-surface);
    color: var(--rv-muted-2);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    vertical-align: 0.02rem;
}

.inline-reference-open:hover,
.inline-reference-open:focus-visible {
    border-color: var(--rv-accent);
    background: var(--rv-accent-soft);
    color: var(--rv-accent-text);
}

.tag-reference {
    border-color: #d8c58c;
    background: #fff6d7;
    color: #65500d;
}

.block-reference {
    border-color: #c8d2ef;
    background: #eef3ff;
    color: #28436e;
}

.inline-media-frame,
.inline-image-frame {
    display: block;
    max-width: min(100%, 48rem);
    margin: 0.45rem 0;
}

.inline-media {
    display: block;
    max-width: 100%;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #ffffff;
}

.inline-image {
    max-height: 32rem;
    object-fit: contain;
    cursor: zoom-in;
}

.inline-video {
    width: min(100%, 48rem);
    max-height: 32rem;
    background: #111820;
}

.inline-audio-frame {
    max-width: min(100%, 36rem);
}

.inline-audio {
    display: block;
    width: 100%;
}

.inline-youtube-frame {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #111820;
}

.inline-youtube {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 2.5rem);
    background: rgba(4, 8, 12, 0.86);
    backdrop-filter: blur(6px);
}

.image-lightbox img {
    display: block;
    max-width: min(100%, 96rem);
    max-height: 92vh;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
}

.image-lightbox-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(8, 13, 18, 0.72);
    color: #ffffff;
    font-size: 1.35rem;
    line-height: 1;
}

.page-references-section {
    margin-top: 2.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid #d9e0e6;
}

.page-references-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.page-references-heading h2 {
    margin: 0;
    color: #42515d;
    font-size: 1rem;
    font-weight: 600;
}

.inline-reference-groups {
    display: grid;
    gap: 1rem;
    margin-top: 0.85rem;
}

.inline-reference-group {
    display: grid;
    gap: 0.45rem;
}

.reference-group-title {
    justify-self: start;
    border: 0;
    background: transparent;
    color: #1d65d8;
    font-weight: 600;
    padding: 0.1rem 0;
    text-align: left;
}

.inline-reference-list {
    display: grid;
    gap: 0.25rem;
}

.inline-reference-row {
    display: grid;
    grid-template-columns: 1.25rem 1.25rem minmax(0, 1fr);
    gap: 0.35rem;
    align-items: start;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #1a232b;
    padding: 0.25rem 0.4rem;
    text-align: left;
}

.reference-expand-button,
.reference-expand-spacer {
    width: 1.25rem;
    height: 1.75rem;
}

.reference-expand-button {
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #7b8a95;
    padding: 0;
}

.reference-expand-button span {
    display: block;
    font-size: 0.68rem;
    line-height: 1;
    transition: transform 120ms ease;
}

.reference-expand-button:hover {
    background: #edf1f4;
    color: #22303a;
}

.reference-expand-button.is-expanded span {
    transform: rotate(90deg);
}

.inline-reference-row:hover,
.reference-row-main:hover {
    background: rgba(255, 255, 255, 0.72);
    border-color: #e1e6eb;
}

.reference-row-main {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.35rem;
    align-items: start;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
}

.reference-bullet {
    position: relative;
    width: 1.25rem;
    height: 1.75rem;
}

.reference-bullet::after {
    content: "";
    position: absolute;
    top: 0.64rem;
    left: 0.42rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #9aa7ad;
}

.reference-row-content {
    min-width: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.reference-row-content .block-display,
.reference-row-content .block-input {
    width: 100%;
    min-height: 1.85rem;
}

.reference-row-content .block-display {
    border-color: transparent;
    background: transparent;
    padding: 0.05rem 0.15rem;
}

.reference-row-content .block-display:hover {
    border-color: transparent;
    background: transparent;
}

.inline-reference-children {
    display: grid;
    gap: 0.18rem;
    margin-left: 2.85rem;
}

.inline-reference-child-row {
    --indent: 1;
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.35rem;
    align-items: start;
    min-width: 0;
    padding: 0.12rem 0.4rem 0.12rem calc(var(--indent) * 1.5rem);
    color: #24313a;
}

.unlinked-reference-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.workspace-panel {
    min-width: 0;
    border-top: 1px solid #d9e0e6;
    padding-top: 1rem;
    display: grid;
    align-content: start;
    gap: 1.3rem;
}

.backlinks-panel,
.side-pages-panel {
    min-width: 0;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #485966;
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
}

.panel-heading strong {
    color: #111820;
}

.empty-state {
    margin-top: 0.8rem;
    color: #73828e;
}

.backlink-list {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.85rem;
}

.backlink-card {
    display: grid;
    gap: 0.35rem;
    width: 100%;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
    padding: 0.75rem;
    text-align: left;
}

.backlink-card-main {
    display: grid;
    gap: 0.35rem;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
}

.unlinked-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.toolbar-button.compact {
    height: 2.2rem;
    padding: 0 0.65rem;
    font-size: 0.82rem;
}

.side-page {
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #ffffff;
    padding: 0.75rem;
}

.side-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.side-page-title {
    min-width: 0;
    border: 0;
    background: transparent;
    color: #111820;
    font-weight: 800;
    padding: 0;
    text-align: left;
}

.side-close {
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid #d9e0e6;
    border-radius: 6px;
    background: #ffffff;
    color: #485966;
}

.side-page-blocks {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.side-page-block {
    color: #24313a;
    line-height: 1.45;
}

.tutorial-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem 0 4rem;
}

.tutorial-header {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(22rem, 0.78fr);
    align-items: end;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.tutorial-header-copy {
    max-width: 760px;
}

.tutorial-header h1 {
    margin: 0.1rem 0 0.45rem;
    color: var(--rv-text-strong);
    font-size: clamp(2.3rem, 5vw, 4.7rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.tutorial-header p {
    margin: 0;
    color: var(--rv-muted);
    line-height: 1.55;
}

.tutorial-start-panel {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 1.15rem;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--rv-surface) 86%, var(--rv-accent) 14%), var(--rv-surface)),
        var(--rv-surface);
    box-shadow: var(--rv-shadow);
}

.tutorial-start-kicker {
    display: inline-flex;
    margin-bottom: 0.4rem;
    color: var(--rv-accent-text);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tutorial-start-panel h2 {
    margin: 0 0 0.35rem;
    color: var(--rv-text-strong);
    font-size: 1.45rem;
}

.tutorial-start-panel p {
    margin: 0;
    color: var(--rv-muted-2);
    line-height: 1.5;
}

.tutorial-start-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.35rem;
    border-radius: 8px;
    background: #f4b51f;
    color: #101820;
    padding: 0.95rem 1.1rem;
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
    box-shadow: 0 14px 32px rgba(197, 139, 15, 0.22);
}

.tutorial-start-button::after {
    content: ">";
    display: grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 6px;
    background: rgba(16, 24, 32, 0.12);
}

.tutorial-start-button span {
    font-size: 1.18rem;
}

.tutorial-start-button small {
    display: block;
    color: rgba(16, 24, 32, 0.72);
    font-size: 0.78rem;
    font-weight: 900;
}

.tutorial-start-button:hover,
.tutorial-start-button:focus-visible {
    color: #101820;
    transform: translateY(-1px);
}

.tutorial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.tutorial-card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0.85rem;
    min-height: 22rem;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: var(--rv-surface);
    box-shadow: var(--rv-shadow);
    padding: 1rem;
}

.tutorial-card-wide {
    grid-column: span 3;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: none;
    align-items: stretch;
    min-height: 15rem;
}

.tutorial-card-copy {
    min-width: 0;
}

.tutorial-card h2 {
    margin: 0 0 0.45rem;
    color: var(--rv-text-strong);
    font-size: 1.05rem;
    line-height: 1.25;
}

.tutorial-card p {
    margin: 0;
    color: var(--rv-muted-2);
    line-height: 1.5;
}

.tutorial-card code {
    color: var(--rv-text-strong);
    font-weight: 800;
}

.tutorial-shot {
    position: relative;
    display: grid;
    align-content: center;
    gap: 0.7rem;
    min-height: 12rem;
    overflow: hidden;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--rv-surface-2) 84%, #dbeafe 16%), var(--rv-surface));
    padding: 0.85rem;
}

.tutorial-shot::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(102, 121, 134, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102, 121, 134, 0.08) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 80%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 80%);
}

.tutorial-shot > * {
    position: relative;
}

.tutorial-shot h3 {
    margin: 0;
    color: var(--rv-text-strong);
    font-size: 1.55rem;
    line-height: 1;
}

.tutorial-shot small {
    color: var(--rv-muted);
    font-weight: 800;
}

.tutorial-shot ul {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding-left: 1.1rem;
    color: var(--rv-text-soft);
}

.tutorial-shot-toolbar,
.tutorial-notebook-switcher,
.tutorial-mini-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.tutorial-shot-toolbar span,
.tutorial-shot-toolbar strong,
.tutorial-notebook-switcher strong,
.tutorial-notebook-switcher span,
.tutorial-mini-tabs span {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rv-input-border);
    border-radius: 6px;
    background: var(--rv-surface);
    color: var(--rv-text);
    padding: 0.35rem 0.55rem;
    font-size: 0.8rem;
    line-height: 1;
}

.tutorial-shot-toolbar strong {
    font-weight: 900;
}

.tutorial-shot-block,
.tutorial-task-line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    color: var(--rv-text-soft);
}

.tutorial-shot-block span {
    flex: 0 0 0.42rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #87939c;
}

.tutorial-shot-block strong,
.tutorial-task-line strong {
    min-width: 0;
    font-weight: 700;
}

.tutorial-shot-block.is-child {
    margin-left: 1.6rem;
}

.tutorial-shot-block.is-drop {
    margin-left: 1.6rem;
    border-radius: 8px;
    background: rgba(47, 111, 103, 0.09);
    padding: 0.45rem 0.5rem;
    box-shadow: inset 3px 0 0 var(--rv-accent);
}

.tutorial-key-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tutorial-key-row span {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    border: 1px solid var(--rv-input-border);
    border-radius: 6px;
    background: var(--rv-surface);
    color: var(--rv-text-strong);
    padding: 0 0.45rem;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
}

.tutorial-ref,
.tutorial-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
    font-size: 0.78rem;
    font-weight: 900;
}

.tutorial-ref {
    border: 1px solid var(--rv-ref-border);
    background: var(--rv-ref-bg);
    color: var(--rv-ref-text);
}

.tutorial-tag {
    border: 1px solid var(--rv-tag-border);
    background: var(--rv-tag-bg);
    color: var(--rv-tag-text);
}

.tutorial-shot-reference,
.tutorial-shot-search,
.tutorial-command-menu,
.tutorial-favorites {
    display: grid;
    gap: 0.45rem;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--rv-surface) 88%, transparent);
    padding: 0.7rem;
}

.tutorial-shot-reference p {
    margin: 0;
    color: var(--rv-text-soft);
}

.tutorial-shot-search {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.tutorial-shot-search span {
    color: var(--rv-muted);
}

.tutorial-checkbox {
    display: grid;
    flex: 0 0 1.15rem;
    width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    border: 1px solid var(--rv-input-border);
    border-radius: 4px;
    background: var(--rv-surface);
}

.tutorial-checkbox.is-checked::after {
    content: "";
    width: 0.58rem;
    height: 0.32rem;
    border-bottom: 2px solid var(--rv-accent);
    border-left: 2px solid var(--rv-accent);
    transform: rotate(-45deg);
}

.tutorial-task-line.is-done {
    color: var(--rv-muted);
    text-decoration: line-through;
}

.tutorial-command-menu {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.tutorial-command-menu strong {
    color: var(--rv-text-strong);
    font-family: Consolas, "SFMono-Regular", monospace;
}

.tutorial-command-menu span {
    color: var(--rv-muted);
    font-size: 0.85rem;
}

.tutorial-media-card,
.tutorial-image-card,
.tutorial-format-line {
    display: grid;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--rv-surface) 88%, transparent);
    color: var(--rv-text-soft);
    padding: 0.7rem;
}

.tutorial-media-card,
.tutorial-image-card {
    grid-template-columns: auto minmax(0, 1fr);
}

.tutorial-media-card small,
.tutorial-image-card small {
    color: var(--rv-muted);
    font-weight: 800;
}

.tutorial-media-play {
    display: grid;
    grid-row: span 2;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border-radius: 999px;
    background: #ff0033;
    box-shadow: 0 10px 24px rgba(255, 0, 51, 0.24);
}

.tutorial-media-play::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 0.18rem;
    border-top: 0.45rem solid transparent;
    border-bottom: 0.45rem solid transparent;
    border-left: 0.72rem solid #ffffff;
}

.tutorial-image-card span {
    display: block;
    grid-row: span 2;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 7px;
    background:
        linear-gradient(135deg, transparent 42%, rgba(16, 24, 32, 0.18) 43%),
        linear-gradient(135deg, #9bdcf4, #7bd88f);
}

.tutorial-format-line {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.tutorial-format-line code {
    font-size: 0.82rem;
}

.tutorial-format-line strong,
.tutorial-format-line em,
.tutorial-format-line del {
    color: var(--rv-text-strong);
}

.tutorial-format-line del {
    color: var(--rv-muted);
}

.tutorial-notebook-switcher {
    justify-content: space-between;
    width: min(24rem, 100%);
}

.tutorial-notebook-switcher strong {
    flex: 1;
    justify-content: space-between;
    font-size: 0.92rem;
}

.tutorial-notebook-switcher span {
    border-color: #e0a813;
    background: #f4b51f;
    color: #101820;
    font-weight: 900;
}

.tutorial-favorites {
    align-content: start;
}

.tutorial-favorites span {
    color: var(--rv-text-soft);
    font-weight: 800;
}

.tutorial-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

@media (max-width: 1060px) {
    .tutorial-header {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .tutorial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tutorial-card-wide {
        grid-column: span 2;
    }
}

.interactive-tutorial-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(9, 14, 18, 0.18), rgba(9, 14, 18, 0.04)),
        radial-gradient(circle at 70% 72%, rgba(247, 181, 31, 0.14), transparent 26rem);
}

.interactive-tutorial-panel {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 1000;
    width: min(29rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: var(--rv-surface);
    color: var(--rv-text);
    box-shadow: 0 24px 70px rgba(13, 22, 30, 0.28);
    padding: 1rem;
}

.interactive-tutorial-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--rv-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.interactive-tutorial-progress {
    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    gap: 0.25rem;
    margin: 0.8rem 0 1rem;
}

.interactive-tutorial-progress span {
    height: 0.28rem;
    border-radius: 999px;
    background: var(--rv-border);
}

.interactive-tutorial-progress span.is-current {
    background: var(--rv-accent);
}

.interactive-tutorial-progress span.is-done {
    background: #f4b51f;
}

.interactive-tutorial-panel h2 {
    margin: 0 0 0.45rem;
    color: var(--rv-text-strong);
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    line-height: 1.08;
}

.interactive-tutorial-panel p {
    margin: 0;
    color: var(--rv-muted-2);
    line-height: 1.52;
}

.interactive-tutorial-task {
    display: grid;
    gap: 0.25rem;
    margin: 0.9rem 0;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, #f4b51f 45%, var(--rv-border));
    border-radius: 8px;
    background: color-mix(in srgb, #f4b51f 13%, var(--rv-surface));
}

.interactive-tutorial-task strong {
    color: var(--rv-text-strong);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.interactive-tutorial-task span {
    color: var(--rv-text);
    font-weight: 750;
    line-height: 1.45;
}

.interactive-tutorial-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.1rem;
    margin-top: 0.85rem;
    color: var(--rv-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.interactive-tutorial-status-dot {
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 0.55rem;
    border-radius: 999px;
    background: #f4b51f;
    box-shadow: 0 0 0 4px color-mix(in srgb, #f4b51f 18%, transparent);
}

.interactive-tutorial-status.is-complete {
    color: var(--rv-accent);
}

.interactive-tutorial-status.is-complete .interactive-tutorial-status-dot {
    background: var(--rv-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rv-accent) 18%, transparent);
}

.interactive-tutorial-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.interactive-tutorial-primary {
    min-width: 6rem;
}

.interactive-tutorial-target {
    position: relative;
    z-index: 950;
    border-radius: 8px;
    outline: 3px solid #f4b51f;
    outline-offset: 4px;
    box-shadow: 0 0 0 9px rgba(244, 181, 31, 0.2);
}

.collection-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.5rem 0 3rem;
}

.collection-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.collection-header h1 {
    margin: 0.1rem 0 0;
    color: #101820;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.05;
}

.collection-select,
.search-input {
    height: 2.35rem;
    border: 1px solid #cfd7df;
    border-radius: 6px;
    background: #ffffff;
    color: #22303a;
    padding: 0 0.7rem;
}

.collection-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
}

.filter-toggle {
    height: 2.35rem;
    border: 1px solid #cfd7df;
    border-radius: 6px;
    background: #ffffff;
    color: #31576d;
    padding: 0 0.8rem;
    font-weight: 800;
}

.filter-toggle.is-active {
    border-color: #2f6f67;
    background: #2f6f67;
    color: #ffffff;
}

.page-table {
    display: grid;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.page-table-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(14rem, 1fr) 5rem 5rem 6rem 8rem 4rem;
    gap: 0.75rem;
    width: 100%;
    border: 0;
    border-top: 1px solid #edf0f3;
    background: #ffffff;
    color: #22303a;
    padding: 0.75rem;
    text-align: left;
}

.page-table-row:hover {
    background: #f8fafb;
}

.page-table-link {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 2rem;
    border: 0;
    background: transparent;
    color: #31576d;
    font-weight: 800;
    padding: 0;
    text-align: left;
}

.page-table-link:hover {
    color: #1d65d8;
}

.page-table-stats {
    display: contents;
}

.page-table-stat {
    min-width: 0;
}

.page-favorite-button {
    width: 2rem;
    height: 2rem;
    border: 1px solid #d4dbe2;
    border-radius: 6px;
    background: #ffffff;
    color: #87939c;
    font-size: 0.95rem;
    line-height: 1;
}

.page-favorite-button.is-active {
    border-color: #d8c58c;
    background: #fff6d7;
    color: #8a6d12;
}

.page-favorite-button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.page-delete-button {
    width: 2rem;
    height: 2rem;
    border: 1px solid #e1b6bd;
    border-radius: 6px;
    background: #fff4f5;
    color: #9f1f2f;
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
}

.page-delete-button:hover:not(:disabled) {
    border-color: #b73748;
    background: #ffe7eb;
    color: #8f1727;
}

.page-delete-button:disabled {
    cursor: not-allowed;
    opacity: 0.28;
}

.page-table-head {
    border-top: 0;
    background: #f1f4f6;
    color: #536573;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.backup-tools-page {
    max-width: 1040px;
}

.backup-tools-intro {
    max-width: 42rem;
    margin: 0.45rem 0 0;
    color: var(--rv-muted-2, #5f7180);
    line-height: 1.5;
}

.backup-list {
    display: grid;
    gap: 1rem;
}

.backup-group {
    display: grid;
    gap: 0.65rem;
}

.backup-group-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #f8fafb;
    padding: 0.8rem 1rem;
}

.backup-group-header h2 {
    margin: 0;
    color: #152331;
    font-size: 1rem;
    line-height: 1.25;
}

.backup-group-header p {
    margin: 0.2rem 0 0;
    color: #647684;
    font-size: 0.85rem;
    font-weight: 700;
}

.backup-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #e8f5f3;
    color: #19564f;
    font-weight: 900;
}

.backup-group-items {
    display: grid;
    gap: 0.55rem;
}

.backup-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #ffffff;
    padding: 1rem;
}

.backup-card.is-current {
    border-color: #95c6bf;
    box-shadow: inset 4px 0 0 #2f6f67;
}

.backup-card-main {
    min-width: 0;
}

.backup-card-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.backup-card h3 {
    margin: 0;
    color: #152331;
    font-size: 1rem;
    line-height: 1.25;
}

.backup-card-name {
    margin: 0.35rem 0 0;
    color: #31576d;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.backup-card-meta,
.backup-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;
    margin-top: 0.55rem;
    color: #647684;
    font-size: 0.85rem;
    font-weight: 700;
}

.backup-card-stats {
    color: #334c5f;
}

.backup-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    border: 1px solid #a8d5cf;
    border-radius: 999px;
    background: #e8f6f4;
    color: #2f6f67;
    padding: 0 0.5rem;
    font-size: 0.74rem;
    font-weight: 900;
}

.backup-pill.is-warning {
    border-color: #e2c36d;
    background: #fff6d7;
    color: #8a6d12;
}

.backup-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.backup-card-actions .toolbar-button {
    min-width: 5.6rem;
}

.settings-page {
    max-width: 1080px;
}

.settings-header {
    align-items: end;
    gap: 1.5rem;
}

.settings-header-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.settings-header-metrics span {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    border: 1px solid #d8e0e7;
    border-radius: 999px;
    background: #ffffff;
    color: #31576d;
    padding: 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 850;
}

.settings-intro {
    max-width: 42rem;
    margin: 0.45rem 0 0;
    color: var(--rv-muted-2, #5f7180);
    line-height: 1.5;
}

.settings-layout {
    display: grid;
    gap: 0.9rem;
}

.settings-panel {
    display: grid;
    gap: 0.95rem;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #ffffff;
    padding: 1rem 1.05rem;
    box-shadow: 0 6px 18px rgba(16, 24, 32, 0.035);
}

.settings-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.9fr);
    gap: 0.9rem;
    align-items: stretch;
}

.settings-card-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.settings-section-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.settings-panel h2,
.settings-section-heading h2 {
    margin: 0;
    color: #152331;
    font-size: 1.1rem;
    line-height: 1.25;
}

.settings-panel p,
.settings-section-heading p {
    max-width: 52rem;
    margin: 0.3rem 0 0;
    color: #647684;
    line-height: 1.5;
}

.settings-card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #e8f5f3;
    color: #19564f;
    font-weight: 900;
}

.settings-notebook-controls {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto auto auto;
    gap: 0.55rem;
    align-items: center;
}

.settings-select,
.settings-input {
    min-height: 2.35rem;
    min-width: 0;
    border: 1px solid #cfd7df;
    border-radius: 6px;
    background: #ffffff;
    color: #22303a;
    padding: 0 0.7rem;
}

.settings-select {
    width: 100%;
    font-weight: 800;
}

.settings-add-button {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border: 1px solid #f0b429;
    border-radius: 6px;
    background: #f0b429;
    color: #1d2328;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
}

.settings-actions,
.settings-danger-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.settings-learn-panel,
.settings-policies-panel {
    background: #fbfcfd;
    box-shadow: none;
}

.settings-tool-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    overflow: hidden;
}

.settings-tool-item {
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.75rem;
    min-width: 0;
    border: 1px solid #dce3e9;
    border-radius: 8px;
    background: #ffffff;
    padding: 0.9rem;
}

.settings-tool-main {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    min-width: 0;
}

.settings-tool-icon {
    display: grid;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 8px;
    background: #e8f5f3;
    color: #19564f;
    font-weight: 950;
}

.settings-tool-icon-install {
    background: #fff6d7;
    color: #755c0c;
}

.settings-tool-copy {
    min-width: 0;
}

.settings-tool-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
}

.settings-tool-item h3 {
    margin: 0;
    color: #152331;
    font-size: 1rem;
    line-height: 1.2;
}

.settings-tool-item p {
    margin-top: 0.25rem;
    font-size: 0.9rem;
}

.settings-sidebar-state {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    border: 1px solid rgba(47, 111, 103, 0.22);
    border-radius: 999px;
    background: rgba(47, 111, 103, 0.08);
    color: #285f58;
    padding: 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.settings-sidebar-state.is-hidden {
    border-color: rgba(217, 154, 30, 0.3);
    background: rgba(217, 154, 30, 0.11);
    color: #755c0c;
}

.settings-tool-actions {
    display: flex;
    align-self: end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.settings-pwa-install-control {
    display: grid;
    min-width: 0;
    gap: 0.35rem;
}

.settings-install-message {
    color: #647684;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.35;
}

.settings-note {
    max-width: 44rem;
    border: 1px solid rgba(47, 158, 68, 0.24);
    border-radius: 8px;
    background: rgba(47, 158, 68, 0.07);
    color: #19564f;
    padding: 0.75rem 0.85rem;
    font-weight: 800;
    line-height: 1.45;
}

.settings-upgrade-form {
    display: grid;
    max-width: 34rem;
    gap: 0.75rem;
}

.settings-upgrade-promo {
    max-width: 20rem;
}

.settings-subscription-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    max-width: 44rem;
    color: #647684;
    font-size: 0.88rem;
    line-height: 1.4;
}

.settings-subscription-meta span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
}

.settings-subscription-meta strong {
    color: #153145;
    font-weight: 900;
}

.settings-fine-print {
    max-width: 44rem;
    margin-top: -0.25rem;
    color: var(--rv-muted-2, #647684);
    font-size: 0.9rem;
}

.settings-danger-panel {
    border-color: #efc2c8;
    background: #fffafa;
    box-shadow: none;
}

.settings-danger-panel > .toolbar-button {
    justify-self: start;
}

.delete-confirmation-panel {
    display: grid;
    gap: 0.8rem;
    max-width: 42rem;
    border: 1px solid #efc2c8;
    border-radius: 8px;
    background: #fff4f5;
    padding: 0.9rem;
}

.settings-checkbox-row {
    display: flex;
    align-items: start;
    gap: 0.6rem;
    color: #313f4b;
    font-weight: 800;
    line-height: 1.45;
}

.settings-checkbox-row input {
    flex: 0 0 auto;
    margin-top: 0.2rem;
}

.settings-field {
    display: grid;
    gap: 0.35rem;
    color: #526676;
    font-size: 0.85rem;
    font-weight: 800;
}

.settings-field strong {
    color: #9f1f2f;
}

.settings-input {
    width: 100%;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.search-results,
.task-groups {
    display: grid;
    gap: 0.65rem;
}

.search-result {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) 5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    width: 100%;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
    padding: 0.75rem;
    text-align: left;
}

.search-result-page {
    color: #31576d;
    font-weight: 800;
}

.search-result-type {
    color: #667986;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.search-page {
    max-width: 1180px;
}

.search-header {
    margin-bottom: 0.85rem;
}

.search-subtitle {
    margin: 0.35rem 0 0;
    color: var(--rv-muted);
    line-height: 1.4;
}

.search-subtitle strong {
    color: var(--rv-text-strong);
    font-weight: 800;
}

.search-command-bar {
    align-items: center;
    margin-bottom: 0.7rem;
}

.search-command-bar .search-input {
    height: 2.75rem;
    font-size: 1rem;
}

.search-submit-button {
    min-width: 6.5rem;
    height: 2.75rem;
}

.search-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.85rem;
}

.search-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.search-filter-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    border: 1px solid var(--rv-border);
    border-radius: 999px;
    background: var(--rv-surface);
    color: var(--rv-muted-2);
    padding: 0 0.75rem;
    font-weight: 800;
}

.search-filter-button.is-active {
    border-color: var(--rv-accent);
    background: var(--rv-accent-soft);
    color: var(--rv-accent-text);
}

.search-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: var(--rv-surface-3);
    color: var(--rv-muted);
    font-size: 0.78rem;
    line-height: 1;
}

.search-filter-button.is-active .search-filter-count {
    background: rgba(255, 255, 255, 0.72);
    color: var(--rv-accent-text);
}

.search-sort-select {
    min-width: 10rem;
}

.search-summary {
    margin: 0 0 0.65rem;
    color: var(--rv-muted);
    font-size: 0.88rem;
    font-weight: 800;
}

.search-empty-state {
    margin-top: 0.35rem;
}

.search-result-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    width: 100%;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: var(--rv-surface);
    color: var(--rv-text);
    padding: 0.9rem;
    text-align: left;
    text-decoration: none;
}

.search-result-card:hover {
    border-color: var(--rv-focus);
    background: var(--rv-surface-2);
    color: var(--rv-text);
}

.search-result-main {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.search-result-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.search-result-card .search-result-page {
    color: var(--rv-link);
    font-size: 1rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.search-result-kind {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    border: 1px solid var(--rv-border);
    border-radius: 999px;
    background: var(--rv-surface-3);
    color: var(--rv-muted-2);
    padding: 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.search-result-kind.is-task {
    border-color: var(--rv-accent);
    background: var(--rv-accent-soft);
    color: var(--rv-accent-text);
}

.search-result-kind.is-done {
    border-color: #b8c4cf;
    background: #eef3f6;
    color: #4f6474;
}

.search-result-kind.is-tag {
    border-color: var(--rv-tag-border);
    background: var(--rv-tag-bg);
    color: var(--rv-tag-text);
}

.search-result-kind.is-daily {
    border-color: #c8d2ef;
    background: #eef3ff;
    color: #28436e;
}

.search-result-preview {
    color: var(--rv-text-soft);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.search-result-preview mark {
    border-radius: 4px;
    background: #ffe98a;
    color: #1e2630;
    padding: 0 0.12rem;
}

.search-result-meta-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    min-width: 8rem;
    color: var(--rv-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: right;
}

.task-group {
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #ffffff;
    padding: 0.85rem 0.9rem;
    box-shadow: 0 8px 22px rgba(16, 24, 32, 0.04);
}

.task-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.task-source {
    border: 0;
    background: transparent;
    color: #31576d;
    font-weight: 800;
    min-height: 2rem;
    padding: 0.2rem 0;
    text-align: left;
}

.task-count {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    border: 1px solid var(--rv-border-soft);
    border-radius: 999px;
    background: var(--rv-surface-2);
    color: var(--rv-muted);
    padding: 0 0.55rem;
    font-size: 0.75rem;
    font-weight: 850;
    white-space: nowrap;
}

.task-clusters {
    display: grid;
    gap: 0.55rem;
    border-top: 1px solid var(--rv-border-soft);
    margin-top: 0.55rem;
    padding-top: 0.65rem;
}

.task-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    border-top: 1px solid var(--rv-border-soft);
    margin-top: 0.55rem;
    padding-top: 0.65rem;
}

.task-clusters > .task-row {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.task-context-cluster {
    overflow: hidden;
    border: 1px solid var(--rv-border-soft);
    border-radius: 8px;
    background: var(--rv-surface-2);
}

.task-context-cluster-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--rv-border-soft);
    padding: 0.58rem 0.65rem;
}

.task-context-cluster-list {
    display: grid;
    background: var(--rv-surface);
}

.task-context-cluster-list .task-row {
    margin-top: 0;
    padding: 0.68rem 0.65rem;
}

.task-context-cluster-list .task-row:first-child {
    border-top: 0;
}

.task-row.is-context-grouped .task-content {
    align-self: center;
}

.task-content {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.task-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.22rem 0.35rem;
    min-width: 0;
    color: var(--rv-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.task-context-node {
    display: inline-flex;
    align-items: center;
    max-width: min(100%, 28rem);
    min-height: 1.45rem;
    border: 1px solid var(--rv-border-soft);
    border-radius: 999px;
    background: var(--rv-surface-2);
    color: var(--rv-muted-2);
    padding: 0 0.5rem;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-context-separator {
    color: var(--rv-muted);
    font-size: 0.72rem;
    font-weight: 900;
}

.task-text {
    display: block;
    min-width: 0;
    line-height: 1.45;
}

.import-page {
    display: grid;
    gap: 1rem;
}

.import-header {
    margin-bottom: 0.25rem;
}

.import-lede {
    max-width: 48rem;
    margin: 0.5rem 0 0;
    color: #526675;
    font-size: 1.02rem;
    line-height: 1.55;
}

.import-supported-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.import-source-card {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    column-gap: 0.7rem;
    row-gap: 0.08rem;
    align-items: center;
    min-height: 4.6rem;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #ffffff;
    padding: 0.75rem;
}

.import-source-card > span {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 8px;
    background: #eef5f3;
    color: #2f6f67;
    font-weight: 900;
}

.import-source-card strong {
    color: #18202a;
    line-height: 1.2;
}

.import-source-card small {
    color: #667986;
    font-weight: 700;
    line-height: 1.25;
}

.import-panel {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 1.2fr) auto;
    gap: 0.85rem;
    align-items: end;
    margin: 0.25rem 0 0;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #ffffff;
    padding: 1rem;
    box-shadow: 0 12px 28px rgba(30, 43, 54, 0.06);
}

.import-panel-copy h2 {
    margin: 0 0 0.2rem;
    color: #18202a;
    font-size: 1.15rem;
}

.import-panel-copy p {
    margin: 0;
    color: #667986;
    line-height: 1.4;
}

.import-upload {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    border: 1px dashed #bdc9d4;
    border-radius: 8px;
    background: #f8fafb;
    padding: 0.8rem;
}

.import-upload input {
    width: 100%;
}

.import-upload span,
.import-summary span {
    color: #667986;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.import-upload strong,
.import-summary strong {
    color: #18202a;
}

.import-submit {
    min-height: 3.25rem;
    white-space: nowrap;
}

.import-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.import-summary div {
    display: grid;
    gap: 0.25rem;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #ffffff;
    padding: 0.75rem;
}

.import-message {
    margin-top: 1rem;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #ffffff;
    color: #485966;
    padding: 0.75rem;
}

.import-message.is-error {
    border-color: #e1a2aa;
    background: #fff4f5;
    color: #8f1727;
}

.import-help {
    display: grid;
    gap: 0.25rem;
    margin-top: 1rem;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #f8fafb;
    color: #485966;
    padding: 0.75rem;
}

.import-help strong {
    color: #18202a;
}

.segmented-control {
    display: inline-flex;
    border: 1px solid #cfd7df;
    border-radius: 7px;
    overflow: hidden;
}

.legal-page {
    display: grid;
    gap: 1rem;
}

.legal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #ffffff;
    padding: 0.75rem;
}

.legal-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #18202a;
    font-weight: 900;
    text-decoration: none;
}

.legal-brand-link:hover,
.legal-brand-link:focus-visible {
    color: var(--rv-link);
}

.legal-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.legal-updated {
    margin: 0.55rem 0 0;
    color: #667986;
}

.legal-card {
    display: grid;
    gap: 0.75rem;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #ffffff;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.legal-card h2 {
    margin: 0.75rem 0 0;
    color: #18202a;
    font-size: 1.1rem;
}

.legal-card h2:first-child {
    margin-top: 0;
}

.legal-card p {
    margin: 0;
    color: #485966;
    line-height: 1.6;
}

.legal-card a,
.legal-nav a {
    color: var(--rv-link);
    font-weight: 750;
}

.legal-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.legal-pricing-grid div {
    display: grid;
    gap: 0.2rem;
    border: 1px solid #d9e0e6;
    border-radius: 8px;
    background: #f8fafb;
    padding: 0.85rem;
}

.legal-pricing-grid strong {
    color: #18202a;
}

.legal-pricing-grid span {
    color: #b98200;
    font-weight: 900;
}

.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    color: #667986;
}

.settings-link-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}

.settings-link-grid a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    border: 1px solid #cfd7df;
    border-radius: 8px;
    background: #ffffff;
    color: #31576d;
    padding: 0.25rem 0.75rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.settings-link-grid a:hover {
    border-color: #2f6f67;
    color: #2f6f67;
}

.segment-button {
    height: 2.25rem;
    border: 0;
    border-left: 1px solid #cfd7df;
    background: #ffffff;
    color: #22303a;
    padding: 0 0.8rem;
    font-weight: 800;
}

.segment-button:first-child {
    border-left: 0;
}

.segment-button.is-active {
    background: #2f6f67;
    color: #ffffff;
}

.backlink-card:hover {
    border-color: #8db3d8;
}

.backlink-source {
    color: #31576d;
    font-size: 0.82rem;
    font-weight: 800;
}

.backlink-content {
    color: #24313a;
    line-height: 1.45;
}

@media (min-width: 1040px) {
    .notebook-workspace.has-side-panel {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 2rem;
    }

    .workspace-panel {
        border-top: 0;
        border-left: 1px solid #d9e0e6;
        padding-top: 0.9rem;
        padding-left: 1.25rem;
    }
}

@media (max-width: 640.98px) {
    .notebook-workspace {
        padding: 1rem 0 1.5rem;
    }

    .daily-feed-page {
        padding: 1rem 0 2.5rem;
    }

    .daily-feed-toolbar {
        top: 0;
    }

    .notebook-page-toolbar {
        top: 0;
    }

    .toolbar-history-slot {
        margin-left: 0;
    }

    .daily-feed-list {
        gap: 3.2rem;
    }

    .daily-note-section {
        min-height: 18rem;
        scroll-margin-top: 4.25rem;
    }

    .daily-note-title {
        font-size: 1.75rem;
    }

    .landing-page {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 2rem;
        padding: 2rem 0 2.5rem;
    }

    .brand-mark {
        width: 3.7rem;
        height: 3.7rem;
        margin-bottom: 0.8rem;
        font-size: 2.05rem;
    }

    .landing-copy h1 {
        max-width: 14ch;
        font-size: 2.45rem;
    }

    .landing-slogan {
        margin-bottom: 0.55rem;
        font-size: 1rem;
    }

    .landing-copy p {
        font-size: 0.98rem;
    }

    .landing-badges {
        gap: 0.45rem;
        margin-top: 1rem;
    }

    .landing-panel {
        padding: 1rem;
    }

    .landing-actions,
    .landing-actions form,
    .landing-actions .pwa-install-control,
    .landing-button {
        width: 100%;
    }

    .access-gate {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 1rem 0 2rem;
    }

    .access-gate-copy {
        display: contents;
    }

    .access-eyebrow {
        order: 1;
    }

    .access-gate h1 {
        order: 2;
        max-width: 12ch;
        font-size: 2.65rem;
    }

    .access-lede {
        order: 3;
    }

    .access-checkout {
        order: 4;
    }

    .access-feature-grid {
        order: 5;
        grid-template-columns: 1fr;
    }

    .access-preview {
        order: 6;
        max-width: none;
    }

    .access-plan-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.15rem;
    }

    .access-footer-actions {
        flex-direction: column;
        gap: 0.55rem;
    }

    .access-data-actions,
    .access-delete-actions {
        flex-direction: column;
    }

    .access-data-actions .toolbar-button,
    .access-delete-actions .toolbar-button {
        width: 100%;
    }

    .tutorial-page {
        padding: 1rem 0 2rem;
    }

    .tutorial-header {
        gap: 1rem;
    }

    .tutorial-header h1 {
        font-size: 2.55rem;
    }

    .tutorial-start-panel {
        padding: 1rem;
    }

    .tutorial-start-button {
        min-height: 3.9rem;
    }

    .tutorial-grid {
        grid-template-columns: 1fr;
    }

    .tutorial-card,
    .tutorial-card-wide {
        grid-column: auto;
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .tutorial-shot {
        min-height: 10.5rem;
    }

    .interactive-tutorial-panel {
        right: 0.5rem;
        bottom: 0.5rem;
        width: min(20.5rem, calc(100vw - 1rem));
        max-height: min(44vh, 21rem);
        padding: 0.65rem;
    }

    .interactive-tutorial-backdrop {
        background: transparent;
    }

    .interactive-tutorial-kicker {
        gap: 0.4rem;
        font-size: 0.62rem;
    }

    .interactive-tutorial-progress {
        display: none;
    }

    .interactive-tutorial-panel h2 {
        margin-bottom: 0.3rem;
        font-size: 1.05rem;
        line-height: 1.15;
    }

    .interactive-tutorial-panel p {
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .interactive-tutorial-task {
        gap: 0.2rem;
        margin: 0.55rem 0;
        padding: 0.55rem;
    }

    .interactive-tutorial-task strong {
        font-size: 0.62rem;
    }

    .interactive-tutorial-task span {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .interactive-tutorial-status {
        min-height: 0;
        margin-top: 0.55rem;
        font-size: 0.75rem;
        line-height: 1.25;
    }

    .interactive-tutorial-status-dot {
        width: 0.45rem;
        height: 0.45rem;
        flex-basis: 0.45rem;
        box-shadow: 0 0 0 3px color-mix(in srgb, #f4b51f 18%, transparent);
    }

    .interactive-tutorial-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
        margin-top: 0.65rem;
    }

    .interactive-tutorial-actions .toolbar-button {
        min-height: 2.25rem;
        padding: 0.45rem 0.55rem;
        font-size: 0.78rem;
    }

    .interactive-tutorial-primary {
        min-width: 0;
    }

    .block-row {
        --block-indent-step: 2.02rem;
        grid-template-columns: 2rem auto minmax(0, 1fr);
    }

    .block-row.is-drop-target::before {
        left: calc(var(--drop-indent, var(--indent)) * var(--block-indent-step));
    }

    .block-bullet {
        width: 2rem;
        height: 2.35rem;
    }

    .block-bullet::after {
        left: 0.78rem;
    }

    .todo-checkbox {
        width: 1.6rem;
        height: 1.6rem;
        margin-top: 0.28rem;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    .search-row,
    .import-panel,
    .import-summary {
        grid-template-columns: 1fr;
    }

    .import-supported-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .import-submit {
        width: 100%;
    }

    .legal-pricing-grid {
        grid-template-columns: 1fr;
    }

    .legal-topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .legal-topbar-actions {
        justify-content: stretch;
    }

    .legal-topbar-actions .toolbar-button,
    .legal-topbar-actions .landing-button {
        flex: 1 1 9rem;
        justify-content: center;
    }

    .collection-header {
        align-items: stretch;
    }

    .collection-actions {
        width: 100%;
        justify-content: stretch;
        flex-wrap: wrap;
    }

    .collection-actions .filter-toggle,
    .collection-actions .collection-select {
        flex: 1 1 11rem;
        min-width: 0;
    }

    .settings-header {
        align-items: stretch;
    }

    .settings-header-metrics {
        justify-content: flex-start;
    }

    .settings-layout,
    .settings-two-column,
    .settings-tool-list,
    .settings-link-grid {
        grid-template-columns: 1fr;
    }

    .settings-notebook-controls {
        grid-template-columns: minmax(0, 1fr) 2.35rem;
    }

    .settings-notebook-controls .toolbar-button {
        grid-column: span 1;
    }

    .settings-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-card-count {
        width: fit-content;
    }

    .settings-actions,
    .settings-danger-actions,
    .settings-tool-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-actions .landing-button,
    .settings-danger-actions .toolbar-button,
    .settings-tool-actions .toolbar-button,
    .settings-link-grid a,
    .settings-pwa-install-control,
    .settings-pwa-install-control .toolbar-button {
        width: 100%;
    }

    .search-result {
        grid-template-columns: 1fr;
    }

    .search-result-card {
        grid-template-columns: 1fr;
    }

    .search-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .search-filter-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-filter-button {
        justify-content: space-between;
        width: 100%;
        border-radius: 8px;
    }

    .search-sort-select {
        width: 100%;
    }

    .search-result-meta-row {
        justify-content: flex-start;
        min-width: 0;
        text-align: left;
    }

    .page-table {
        gap: 0.55rem;
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .page-table-row {
        grid-template-columns: 2.35rem minmax(0, 1fr) 2.35rem;
        gap: 0.45rem 0.65rem;
        align-items: start;
        border: 1px solid #d9e0e6;
        border-radius: 8px;
        padding: 0.65rem;
    }

    .page-table-head {
        display: none;
    }

    .page-table-link {
        grid-column: 2;
        min-height: 2.35rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .page-table-stats {
        grid-column: 2 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: 0.2rem 0.65rem;
        margin-top: -0.15rem;
    }

    .page-table-stat {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        color: #536573;
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .page-table-stat::before {
        content: attr(data-label) ":";
        color: #7a8a95;
        font-size: inherit;
        font-weight: 800;
        letter-spacing: 0;
    }

    .page-table-updated {
        color: #445562;
    }

    .task-source {
        min-height: 2.35rem;
    }

    .task-group-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .task-context-cluster-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    .task-context-node {
        max-width: 100%;
    }

    .page-favorite-button {
        width: 2.35rem;
        height: 2.35rem;
    }

    .page-delete-button {
        grid-column: 3;
        grid-row: 1;
        width: 2.35rem;
        height: 2.35rem;
    }

    .backup-card {
        grid-template-columns: 1fr;
    }

    .backup-card-actions {
        justify-content: stretch;
    }

    .backup-card-actions .toolbar-button {
        flex: 1 1 0;
        min-width: 0;
    }

    .reference-group-title,
    .reference-expand-button {
        min-height: 2.15rem;
    }

    .reference-expand-button,
    .reference-expand-spacer {
        width: 2rem;
    }

    .inline-reference {
        min-height: 1.8rem;
    }
}

html[data-theme="dark"] a,
html[data-theme="dark"] .btn-link,
html[data-theme="dark"] .daily-note-title:hover,
html[data-theme="dark"] .reference-group-title,
html[data-theme="dark"] .page-table-link:hover {
    color: var(--rv-link);
}

html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] .inline-reference-row:focus-visible,
html[data-theme="dark"] .reference-expand-button:focus-visible {
    outline-color: var(--rv-accent);
}

html[data-theme="dark"] .page,
html[data-theme="dark"] .content {
    background: var(--rv-bg);
    color: var(--rv-text);
}

html[data-theme="dark"] .top-row,
html[data-theme="dark"] .daily-feed-toolbar,
html[data-theme="dark"] .notebook-page-toolbar {
    background-color: var(--rv-topbar-bg);
    border-color: var(--rv-border);
}

html[data-theme="dark"] .sync-status,
html[data-theme="dark"] .drive-backup-status,
html[data-theme="dark"] .loading-surface,
html[data-theme="dark"] .page-meta,
html[data-theme="dark"] .daily-note-weekday,
html[data-theme="dark"] .daily-feed-sentinel,
html[data-theme="dark"] .daily-feed-end,
html[data-theme="dark"] .empty-state {
    color: var(--rv-muted);
}

html[data-theme="dark"] .page-kind,
html[data-theme="dark"] .page-table-head,
html[data-theme="dark"] .search-result-type,
html[data-theme="dark"] .import-upload span,
html[data-theme="dark"] .import-summary span,
html[data-theme="dark"] .nav-section-label,
html[data-theme="dark"] .page-table-stat,
html[data-theme="dark"] .page-table-stat::before {
    color: var(--rv-muted);
}

html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .collection-header h1,
html[data-theme="dark"] .page-title-input,
html[data-theme="dark"] .daily-note-title,
html[data-theme="dark"] .import-upload strong,
html[data-theme="dark"] .import-summary strong,
html[data-theme="dark"] .panel-heading strong,
html[data-theme="dark"] .side-page-title,
html[data-theme="dark"] .settings-panel h2,
html[data-theme="dark"] .settings-section-heading h2 {
    color: var(--rv-text-strong);
}

html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .toolbar-button,
html[data-theme="dark"] .collection-select,
html[data-theme="dark"] .settings-select,
html[data-theme="dark"] .settings-input,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .filter-toggle,
html[data-theme="dark"] .page-favorite-button,
html[data-theme="dark"] .page-delete-button,
html[data-theme="dark"] .side-close,
html[data-theme="dark"] .segment-button,
html[data-theme="dark"] .top-graph-select,
html[data-theme="dark"] .top-graph-rename,
html[data-theme="dark"] .top-graph-delete,
html[data-theme="dark"] .theme-toggle {
    border-color: var(--rv-input-border);
    background: var(--rv-surface);
    color: var(--rv-text);
}

html[data-theme="dark"] .toolbar-button.danger,
html[data-theme="dark"] .top-graph-delete,
html[data-theme="dark"] .page-delete-button {
    color: var(--rv-danger);
}

html[data-theme="dark"] .icon-button.is-active,
html[data-theme="dark"] .toolbar-button.is-active,
html[data-theme="dark"] .filter-toggle.is-active,
html[data-theme="dark"] .segment-button.is-active {
    border-color: var(--rv-accent);
    background: var(--rv-accent-soft);
    color: var(--rv-accent-text);
}

html[data-theme="dark"] .toolbar-button.danger.is-active {
    border-color: var(--rv-danger);
    background: var(--rv-danger-soft);
    color: var(--rv-danger);
}

html[data-theme="dark"] .page-title-input:focus,
html[data-theme="dark"] .block-input:focus,
html[data-theme="dark"] .block-display:focus {
    border-color: var(--rv-focus);
    background: var(--rv-surface);
    box-shadow: 0 0 0 3px rgba(114, 167, 232, 0.18);
}

html[data-theme="dark"] .block-input,
html[data-theme="dark"] .block-display,
html[data-theme="dark"] .inline-reference-row,
html[data-theme="dark"] .reference-row-main,
html[data-theme="dark"] .inline-reference-child-row,
html[data-theme="dark"] .side-page-block,
html[data-theme="dark"] .backlink-content,
html[data-theme="dark"] .task-text {
    color: var(--rv-text-soft);
}

html[data-theme="dark"] .block-input:hover,
html[data-theme="dark"] .block-display:hover,
html[data-theme="dark"] .inline-reference-row:hover,
html[data-theme="dark"] .reference-row-main:hover {
    background: var(--rv-surface-hover);
    border-color: var(--rv-border);
}

html[data-theme="dark"] .reference-row-content .block-display,
html[data-theme="dark"] .reference-row-content .block-display:hover {
    border-color: transparent;
    background: transparent;
}

html[data-theme="dark"] .block-input.is-uploading-media {
    border-color: #c7951a;
    background: rgba(243, 181, 29, 0.12);
}

html[data-theme="dark"] .block-bullet::after {
    background: #8d9ca7;
}

html[data-theme="dark"] .block-bullet:hover::after,
html[data-theme="dark"] .block-row.is-drop-target::before {
    background: var(--rv-accent);
}

html[data-theme="dark"] .block-row.is-drop-target {
    background: rgba(95, 180, 170, 0.12);
}

html[data-theme="dark"] .daily-note-section.is-day-drop-target {
    background: rgba(95, 180, 170, 0.08);
    box-shadow: inset 0 0 0 2px rgba(95, 180, 170, 0.36);
}

html[data-theme="dark"] .block-row.is-block-selected {
    background: rgba(128, 181, 255, 0.12);
}

html[data-theme="dark"] .block-row.is-block-selected .block-display {
    border-color: rgba(128, 181, 255, 0.26);
    background: rgba(128, 181, 255, 0.08);
}

html[data-theme="dark"] .suggestion-menu,
html[data-theme="dark"] .page-table,
html[data-theme="dark"] .page-table-row,
html[data-theme="dark"] .search-result,
html[data-theme="dark"] .task-group,
html[data-theme="dark"] .import-panel,
html[data-theme="dark"] .import-source-card,
html[data-theme="dark"] .import-upload,
html[data-theme="dark"] .import-summary div,
html[data-theme="dark"] .import-message,
html[data-theme="dark"] .import-help,
html[data-theme="dark"] .backlink-card,
html[data-theme="dark"] .side-page,
html[data-theme="dark"] .settings-panel,
html[data-theme="dark"] .settings-header-metrics span,
html[data-theme="dark"] .settings-tool-item,
html[data-theme="dark"] .delete-confirmation-panel {
    border-color: var(--rv-border);
    background: var(--rv-surface);
    color: var(--rv-text);
}

html[data-theme="dark"] .settings-learn-panel,
html[data-theme="dark"] .settings-policies-panel {
    background: var(--rv-surface-2);
}

html[data-theme="dark"] .settings-tool-item h3 {
    color: var(--rv-text-strong);
}

html[data-theme="dark"] .settings-danger-panel,
html[data-theme="dark"] .delete-confirmation-panel {
    border-color: color-mix(in srgb, var(--rv-danger) 48%, var(--rv-border));
}

html[data-theme="dark"] .settings-tool-icon {
    border-color: transparent;
    background: var(--rv-accent-soft);
    color: var(--rv-accent-text);
}

html[data-theme="dark"] .settings-tool-icon-install {
    background: color-mix(in srgb, #f4b51f 16%, transparent);
    color: #f4d06c;
}

html[data-theme="dark"] .settings-sidebar-state {
    border-color: color-mix(in srgb, var(--rv-accent) 32%, var(--rv-border));
    background: var(--rv-accent-soft);
    color: var(--rv-accent-text);
}

html[data-theme="dark"] .settings-sidebar-state.is-hidden {
    border-color: color-mix(in srgb, #f4b51f 36%, var(--rv-border));
    background: color-mix(in srgb, #f4b51f 14%, transparent);
    color: #f4d06c;
}

html[data-theme="dark"] .settings-checkbox-row {
    color: var(--rv-text-soft);
}

html[data-theme="dark"] .settings-note {
    border-color: color-mix(in srgb, #2f9e44 42%, var(--rv-border));
    background: color-mix(in srgb, #2f9e44 14%, transparent);
    color: #b8f0cd;
}

html[data-theme="dark"] .settings-subscription-meta {
    color: var(--rv-muted);
}

html[data-theme="dark"] .settings-subscription-meta strong {
    color: var(--rv-text-strong);
}

html[data-theme="dark"] .settings-field,
html[data-theme="dark"] .settings-intro,
html[data-theme="dark"] .settings-fine-print,
html[data-theme="dark"] .settings-panel p,
html[data-theme="dark"] .settings-section-heading p,
html[data-theme="dark"] .settings-install-message {
    color: var(--rv-muted);
}

html[data-theme="dark"] .settings-field strong {
    color: var(--rv-danger);
}

html[data-theme="dark"] .settings-card-count {
    background: var(--rv-accent-soft);
    color: var(--rv-accent-text);
}

html[data-theme="dark"] .import-help strong {
    color: var(--rv-text);
}

html[data-theme="dark"] .import-lede,
html[data-theme="dark"] .import-panel-copy p,
html[data-theme="dark"] .import-source-card small {
    color: var(--rv-muted);
}

html[data-theme="dark"] .import-panel-copy h2,
html[data-theme="dark"] .import-source-card strong {
    color: var(--rv-text-strong);
}

html[data-theme="dark"] .import-source-card > span {
    background: var(--rv-accent-soft);
    color: var(--rv-accent-text);
}

html[data-theme="dark"] .import-upload {
    border-color: var(--rv-input-border);
    background: var(--rv-surface-2);
}

html[data-theme="dark"] .legal-topbar,
html[data-theme="dark"] .legal-card,
html[data-theme="dark"] .legal-pricing-grid div {
    border-color: var(--rv-border);
    background: var(--rv-surface);
}

html[data-theme="dark"] .legal-brand-link {
    color: var(--rv-text-strong);
}

html[data-theme="dark"] .legal-brand-link:hover,
html[data-theme="dark"] .legal-brand-link:focus-visible {
    color: var(--rv-accent-text);
}

html[data-theme="dark"] .legal-updated,
html[data-theme="dark"] .legal-card p,
html[data-theme="dark"] .legal-nav {
    color: var(--rv-muted);
}

html[data-theme="dark"] .legal-card h2,
html[data-theme="dark"] .legal-pricing-grid strong {
    color: var(--rv-text-strong);
}

html[data-theme="dark"] .legal-pricing-grid div {
    background: var(--rv-surface-2);
}

html[data-theme="dark"] .settings-link-grid a {
    border-color: var(--rv-border);
    background: var(--rv-surface-2);
    color: var(--rv-link);
}

html[data-theme="dark"] .settings-link-grid a:hover {
    border-color: var(--rv-accent);
    color: var(--rv-accent-text);
}

html[data-theme="dark"] .suggestion-menu {
    box-shadow: var(--rv-shadow);
}

html[data-theme="dark"] .date-command-picker,
html[data-theme="dark"] .link-command-picker {
    border-color: var(--rv-border);
    background: var(--rv-surface-2);
}

html[data-theme="dark"] .suggestion-item {
    color: var(--rv-text);
}

html[data-theme="dark"] .suggestion-item:hover,
html[data-theme="dark"] .suggestion-item.is-selected,
html[data-theme="dark"] .page-table-row:hover,
html[data-theme="dark"] .reference-expand-button:hover,
html[data-theme="dark"] .page-table-head {
    background: var(--rv-surface-3);
}

html[data-theme="dark"] .page-table-row {
    border-top-color: var(--rv-border-soft);
}

html[data-theme="dark"] .page-table-link,
html[data-theme="dark"] .search-result-page,
html[data-theme="dark"] .task-source,
html[data-theme="dark"] .backlink-source {
    color: var(--rv-link);
}

html[data-theme="dark"] .task-count,
html[data-theme="dark"] .task-context-node {
    border-color: var(--rv-border);
    background: var(--rv-surface-2);
    color: var(--rv-muted-2);
}

html[data-theme="dark"] .task-context,
html[data-theme="dark"] .task-context-separator {
    color: var(--rv-muted);
}

html[data-theme="dark"] .backup-card {
    border-color: var(--rv-border);
    background: var(--rv-surface);
    color: var(--rv-text);
}

html[data-theme="dark"] .backup-group-header {
    border-color: var(--rv-border);
    background: var(--rv-surface-2);
}

html[data-theme="dark"] .backup-card.is-current {
    border-color: var(--rv-accent);
    box-shadow: inset 4px 0 0 var(--rv-accent);
}

html[data-theme="dark"] .backup-group-header h2,
html[data-theme="dark"] .backup-card h3 {
    color: var(--rv-text-strong);
}

html[data-theme="dark"] .backup-card-name {
    color: var(--rv-link);
}

html[data-theme="dark"] .backup-tools-intro,
html[data-theme="dark"] .backup-group-header p,
html[data-theme="dark"] .backup-card-meta {
    color: var(--rv-muted);
}

html[data-theme="dark"] .backup-card-stats {
    color: var(--rv-text-soft);
}

html[data-theme="dark"] .backup-pill {
    border-color: var(--rv-accent);
    background: var(--rv-accent-soft);
    color: var(--rv-accent-text);
}

html[data-theme="dark"] .backup-pill.is-warning {
    border-color: #8f6f18;
    background: rgba(243, 181, 29, 0.14);
    color: #ffd86d;
}

html[data-theme="dark"] .backup-group-count {
    background: var(--rv-accent-soft);
    color: var(--rv-accent-text);
}

html[data-theme="dark"] .search-result-card:hover {
    background: var(--rv-surface-2);
}

html[data-theme="dark"] .search-filter-button.is-active .search-filter-count {
    background: rgba(155, 225, 215, 0.16);
    color: var(--rv-accent-text);
}

html[data-theme="dark"] .search-result-preview mark {
    background: #735f12;
    color: #fff1b8;
}

html[data-theme="dark"] .search-result-kind.is-done {
    border-color: var(--rv-input-border);
    background: var(--rv-surface-3);
    color: var(--rv-muted-2);
}

html[data-theme="dark"] .search-result-kind.is-daily {
    border-color: var(--rv-block-ref-border);
    background: var(--rv-block-ref-bg);
    color: var(--rv-block-ref-text);
}

html[data-theme="dark"] .page-references-section,
html[data-theme="dark"] .workspace-panel {
    border-color: var(--rv-border);
}

html[data-theme="dark"] .panel-heading {
    color: var(--rv-muted);
}

html[data-theme="dark"] .reference-expand-button,
html[data-theme="dark"] .side-close,
html[data-theme="dark"] .block-input.is-done,
html[data-theme="dark"] .block-display.is-done {
    color: var(--rv-muted);
}

html[data-theme="dark"] .reference-bullet::after {
    background: #7f8d98;
}

html[data-theme="dark"] .reference-chip,
html[data-theme="dark"] .inline-reference {
    border-color: var(--rv-ref-border);
    background: var(--rv-ref-bg);
    color: var(--rv-ref-text);
}

html[data-theme="dark"] .inline-reference-open {
    border-color: var(--rv-border);
    background: var(--rv-surface-2);
    color: var(--rv-muted-2);
}

html[data-theme="dark"] .inline-reference-open:hover,
html[data-theme="dark"] .inline-reference-open:focus-visible {
    border-color: var(--rv-accent);
    background: var(--rv-accent-soft);
    color: var(--rv-accent-text);
}

html[data-theme="dark"] .inline-code-block {
    border-color: #253545;
    background: #05090d;
    color: #edf4f8;
}

html[data-theme="dark"] .inline-code-language {
    border-bottom-color: #1c2935;
    background: #0d151d;
    color: #9dafbd;
}

html[data-theme="dark"] .inline-bold {
    color: var(--rv-text-strong);
}

html[data-theme="dark"] .access-plan:has(input:checked) {
    border-color: #d8a522;
    background: #332a13;
    box-shadow: 0 0 0 1px rgba(216, 165, 34, 0.28);
}

html[data-theme="dark"] .access-plan-topline span {
    color: #ffd36a;
}

html[data-theme="dark"] .access-preview-line > span {
    background: #8d9ca7;
}

html[data-theme="dark"] .tag-reference {
    border-color: var(--rv-tag-border);
    background: var(--rv-tag-bg);
    color: var(--rv-tag-text);
}

html[data-theme="dark"] .block-reference {
    border-color: var(--rv-block-ref-border);
    background: var(--rv-block-ref-bg);
    color: var(--rv-block-ref-text);
}

html[data-theme="dark"] .inline-media,
html[data-theme="dark"] .inline-youtube-frame {
    border-color: var(--rv-border);
    background: var(--rv-surface-2);
}

html[data-theme="dark"] .page-favorite-button.is-active {
    border-color: var(--rv-tag-border);
    background: var(--rv-tag-bg);
    color: var(--rv-tag-text);
}

html[data-theme="dark"] .import-message.is-error {
    border-color: var(--rv-danger);
    background: var(--rv-danger-soft);
    color: var(--rv-danger);
}

html[data-theme="dark"] .segmented-control {
    border-color: var(--rv-input-border);
}

html[data-theme="dark"] .segment-button {
    border-left-color: var(--rv-input-border);
}

html[data-theme="dark"] .backlink-card:hover {
    border-color: var(--rv-focus);
}

@media (max-width: 640.98px) {
    html[data-theme="dark"] .page-table {
        background: transparent;
    }
}