/* ------------------------------
   Base / existing styles
------------------------------ */

html {
  font-size: 14px;
}

.file-details-button { color: var(--app-primary, #7c73ff); font-size: .82rem; font-weight: 700; text-decoration: none; }
.file-details-button:hover { color: var(--app-primary-strong, #6257ee); }
.file-load-sentinel { display: flex; min-height: 5rem; align-items: center; justify-content: center; gap: .7rem; color: var(--app-text-muted); font-size: .82rem; }
.details-page-heading { margin: 2rem 0 1.5rem; }
.details-page-heading h1 { margin: .35rem 0; }
.details-back { display: block; margin-bottom: 1.25rem; color: var(--app-text-muted, #70758c); text-decoration: none; }
.detail-option-card { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; margin-bottom: 1.25rem; padding: 1.5rem; border: 1px solid var(--app-border, #dfe3ee); border-radius: 1.25rem; background: var(--app-surface, #fff); }
.detail-option-number { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: .8rem; background: #6f63e8; color: white; font-weight: 800; }
.detail-option-copy { min-width: 0; }
.detail-option-copy h2 { margin: 0 0 .4rem; font-size: 1.3rem; }
.detail-option-copy > p { color: var(--app-text-muted, #70758c); }
.detail-parse-form { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; gap: .75rem; align-items: center; margin-top: 1rem; }
.privacy-note { display: block; margin-top: .65rem; color: var(--app-text-muted, #70758c); }
.detail-table-heading, .detail-save-bar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.detail-editor-table { margin-top: 1rem; min-width: 700px; color: inherit; }
.detail-editor-table th { color: var(--app-text-muted, #70758c); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.detail-editor-table td:nth-child(1) { width: 28%; }.detail-editor-table td:nth-child(2) { width: 45%; }.detail-editor-table td:nth-child(3) { width: 22%; }
.remove-detail-row { border: 0; background: transparent; color: #e05a68; font-size: 1.5rem; }
.detail-save-bar { padding-top: 1rem; border-top: 1px solid var(--app-border, #dfe3ee); color: var(--app-text-muted, #70758c); }
.link-target-results { display: grid; gap: .65rem; min-height: 1.5rem; margin-top: .85rem; color: var(--app-text-muted); }
.detail-option-copy #linkTargetSearch { color: var(--app-text); background: var(--app-surface-muted); border-color: var(--app-border); caret-color: var(--app-text); }
.detail-option-copy #linkTargetSearch::placeholder { color: var(--app-text-muted); opacity: .8; }
.detail-option-copy #linkTargetSearch:focus { color: var(--app-text); background: var(--app-surface-muted); border-color: var(--app-primary); -webkit-text-fill-color: var(--app-text); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary) 25%, transparent); }
.link-target-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem; border: 1px solid var(--app-border); border-radius: 11px; background: var(--app-surface-muted); }
.link-target-row > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .25rem .65rem; min-width: 0; }
.link-target-row strong { overflow: hidden; color: var(--app-text); text-overflow: ellipsis; white-space: nowrap; }
.link-target-row small { grid-column: 2; color: var(--app-text-muted); }
.graph-link-card { color: inherit; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.graph-link-card:hover { color: inherit; border-color: var(--app-primary); transform: translateY(-1px); }
.graph-link-card > a { flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.graph-link-card > a > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .25rem .65rem; min-width: 0; }
.graph-link-card > a small { grid-column: 2; color: var(--app-text-muted); }
.graph-link-actions { display: flex; flex: 0 0 auto; gap: .5rem; }
.vertex-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.vertex-preview-card { overflow: hidden; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface-muted); color: var(--app-text); text-decoration: none; }
.vertex-preview-card:hover { border-color: var(--app-primary); color: var(--app-text); }
.vertex-preview-card img { display: block; width: 100%; height: 12rem; object-fit: contain; background: var(--app-bg); }
.vertex-preview-card > span, .vertex-preview-card > a > span { display: grid; gap: .2rem; padding: .85rem; }
.vertex-preview-card > a { display: block; color: inherit; text-decoration: none; }
.vertex-evidence-ai-action { padding: 0 .85rem .85rem; }
.vertex-evidence-ai-action .btn { width: 100%; }
.file-preview-ai-action { display: flex; justify-content: center; margin-top: 1rem; }
.vertex-preview-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vertex-preview-card small { color: var(--app-text-muted); text-transform: capitalize; }
.file-details-preview-card { grid-template-columns: 1fr; }
.file-details-preview-link { display: flex; width: min(100%, 240px); height: 168px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-bg); }
.file-details-preview-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.graph-link-arrow { color: var(--app-primary); font-size: 1.1rem; }
.vertex-view-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.vertex-heading-identity { display: flex; min-width: 0; align-items: center; gap: 1rem; }
.vertex-heading-identity > div { min-width: 0; }
.vertex-heading-avatar-wrap { display: block; width: 64px; height: 64px; flex: 0 0 64px; }
.vertex-heading-avatar { display: block; width: 100%; height: 100%; border: 3px solid color-mix(in srgb, var(--app-primary) 35%, var(--app-border)); border-radius: 50%; object-fit: cover; box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
.classification-choice { display: flex; flex-wrap: wrap; gap: 1rem; margin: .85rem 0; color: var(--app-text); }
.classification-choice label { display: flex; align-items: center; gap: .4rem; }
.classification-choice input { accent-color: var(--app-primary); }
.object-classification-card .app-button { margin-top: 1rem; }
.object-classification-card .form-control { color: var(--app-text) !important; background-color: var(--app-surface-muted) !important; border-color: var(--app-border) !important; caret-color: var(--app-text); -webkit-text-fill-color: var(--app-text); }
.object-classification-card .form-control::placeholder { color: var(--app-text-muted) !important; opacity: .85; -webkit-text-fill-color: var(--app-text-muted); }
.object-classification-card .form-control:focus { border-color: var(--app-primary) !important; box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary) 25%, transparent); }
.object-classification-card .vertex-field-label, .object-classification-card .classification-choice { color: var(--app-text); }
body.theme-dark .object-classification-card input:-webkit-autofill { -webkit-text-fill-color: var(--app-text); box-shadow: 0 0 0 1000px var(--app-surface-muted) inset; }
.access-denied-card { max-width: 46rem; margin: 4rem auto; padding: 2rem; }
.access-denied-card h1 { margin: .5rem 0; color: var(--app-text); }
.access-denied-card p { color: var(--app-text-muted); }
.access-denied-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.processing-overlay { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 1.5rem; background: rgba(5, 9, 22, .58); backdrop-filter: blur(5px); }
.processing-overlay[hidden] { display: none; }
.processing-popup { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; width: min(30rem, 100%); padding: 1.35rem; border: 1px solid var(--app-border); border-radius: 18px; color: var(--app-text); background: var(--app-surface-solid); box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }
.processing-popup strong { display: block; font-size: .95rem; }
.processing-popup p { margin: .3rem 0 0; color: var(--app-text-muted); font-size: .76rem; line-height: 1.45; }
.processing-spinner { width: 2.4rem; height: 2.4rem; border: 3px solid color-mix(in srgb, var(--app-primary) 22%, transparent); border-top-color: var(--app-primary); border-radius: 50%; animation: processing-spin .75s linear infinite; }
@keyframes processing-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .processing-spinner { animation-duration: 1.5s; } }
.activity-center { position: relative; }
.activity-toggle { position: relative; }
.activity-toggle.is-processing > span:first-child { display: inline-block; animation: processing-spin .9s linear infinite; }
.activity-badge { position: absolute; top: -.3rem; right: -.35rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border: 2px solid var(--app-surface-solid); border-radius: 999px; color: #fff; background: #ef5b6c; font-size: .62rem; font-weight: 800; line-height: 1rem; text-align: center; }
.activity-panel { position: absolute; z-index: 1200; top: calc(100% + .7rem); right: 0; width: min(24rem, calc(100vw - 2rem)); padding: .8rem; border: 1px solid var(--app-border); border-radius: 16px; color: var(--app-text); background: var(--app-surface-solid); box-shadow: 0 18px 55px rgba(10, 14, 28, .24); }
.activity-panel[hidden] { display: none; }
.activity-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .25rem .3rem .7rem; border-bottom: 1px solid var(--app-border); }
.activity-heading > div { display: grid; }
.activity-heading strong { font-size: .9rem; }
.activity-heading small, .activity-empty { color: var(--app-text-muted); font-size: .68rem; }
.activity-clear { padding: .25rem; border: 0; color: var(--app-primary); background: transparent; font-size: .68rem; font-weight: 700; }
.activity-items { display: grid; gap: .35rem; margin-top: .55rem; }
.activity-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .65rem; border-radius: 11px; background: var(--app-surface-muted); }
.activity-item > div { display: grid; min-width: 0; }
.activity-item strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.activity-item small { color: var(--app-text-muted); font-size: .66rem; }
.activity-marker { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--app-primary) 25%, transparent); border-top-color: var(--app-primary); border-radius: 50%; color: #fff; font-size: .8rem; font-weight: 850; animation: processing-spin .8s linear infinite; }
.activity-item.status-completed .activity-marker { border-color: #2fb978; background: #2fb978; animation: none; }
.activity-item.status-failed .activity-marker, .activity-item.status-queue-failed .activity-marker { border-color: #e45e6d; background: #e45e6d; animation: none; }
.activity-retry { padding: .35rem .55rem; border: 1px solid color-mix(in srgb, var(--app-primary) 55%, var(--app-border)); border-radius: 8px; color: var(--app-primary); background: var(--app-surface-solid); font-size: .66rem; font-weight: 750; }
.activity-retry:hover { color: #fff; background: var(--app-primary); }
.activity-retry:disabled { opacity: .55; }
.activity-empty { margin: .85rem .35rem .35rem; }
@media (prefers-reduced-motion: reduce) { .activity-marker, .activity-toggle.is-processing > span:first-child { animation-duration: 1.6s; } }
.existing-link-list { display: grid; gap: .65rem; margin: 1.15rem 0 1.35rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--app-border); }
.relationship-type-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.relationship-type-picker .form-select, .relationship-type-picker .form-control { color: var(--app-text); background-color: var(--app-surface-muted); border-color: var(--app-border); }
.existing-link-row form { flex: 0 0 auto; }
@media (max-width: 640px) {
    .graph-link-card, .graph-link-actions { align-items: stretch; flex-direction: column; }
    .graph-link-actions .btn { width: 100%; }
}

.nav-link.active { color: var(--text-primary); }
.nav-link.active::after { width: 100%; }
.global-add-menu { position: relative; }
.global-add-menu > summary { list-style: none; cursor: pointer; }
.global-add-menu > summary::-webkit-details-marker { display: none; }
.global-add-menu > div {
  position: absolute; z-index: 1100; top: calc(100% + .65rem); right: 0; width: min(620px, 92vw);
  padding: .55rem; border: 1px solid var(--border-color); border-radius: 14px;
  color: var(--app-text); background: var(--app-surface-solid); box-shadow: 0 18px 45px rgb(0 0 0 / 35%);
}
.global-add-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; max-height: min(75vh, 620px); overflow-y: auto; }
.global-add-group { min-width: 0; padding: .45rem; }
.global-add-group > strong { display: block; padding: .25rem .35rem; color: var(--text-secondary); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.global-add-menu > div a { display: block; padding: .55rem .35rem; border-radius: 9px; color: var(--text-primary); text-decoration: none; }
.global-add-menu > div a:hover { background: var(--surface-muted); }
.template-star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; }
.template-star-rating input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.template-star-rating label { color: var(--app-border); cursor: pointer; font-size: 1.8rem; line-height: 1; transition: color .14s ease, transform .14s ease; }
.template-star-rating label:hover,
.template-star-rating label:hover ~ label,
.template-star-rating input:checked ~ label { color: #f3b63f; }
.template-star-rating input:focus-visible + label { border-radius: 4px; outline: 2px solid var(--app-primary); outline-offset: 2px; }
.template-star-rating label:hover { transform: scale(1.08); }
.things-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin: 2rem 0; }
.things-heading h1 { margin: .25rem 0; font-size: clamp(2.6rem, 7vw, 5rem); }
.things-heading p { margin: 0; color: var(--text-secondary); }
.things-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.duplicate-list { display: grid; gap: 1rem; margin: 1.5rem 0 3rem; }
.duplicate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem; }
.duplicate-reason { grid-column: 1 / -1; margin: 0; color: var(--accent); font-size: .78rem; font-weight: 700; }
.duplicate-object { align-self: stretch; min-width: 0; padding: 1rem; }
.duplicate-object h2 { margin: .35rem 0 .15rem; overflow-wrap: anywhere; font-size: 1.1rem; }
.duplicate-object small { color: var(--text-secondary); }
.duplicate-edit-link { display: inline-block; margin: .15rem 0 .4rem; color: var(--accent); font-size: .8rem; font-weight: 700; text-decoration: none; }
.duplicate-edit-link:hover { text-decoration: underline; }
.ai-action-unavailable { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: .35rem; max-width: 28rem; }
.ai-action-unavailable::after { position: absolute; bottom: calc(100% + .45rem); left: 0; z-index: 30; width: max-content; max-width: min(22rem, 80vw); padding: .45rem .6rem; border: 1px solid var(--border-color); border-radius: 7px; color: var(--text-primary); background: var(--surface-solid, var(--app-surface-solid)); box-shadow: var(--app-shadow); content: attr(data-tooltip); font-size: .72rem; font-weight: 650; line-height: 1.3; opacity: 0; pointer-events: none; transform: translateY(.2rem); transition: opacity .14s ease, transform .14s ease; }
.ai-action-unavailable:hover::after, .ai-action-unavailable:focus::after, .ai-action-unavailable:focus-within::after { opacity: 1; transform: translateY(0); }
.ai-action-unavailable .btn:disabled { cursor: not-allowed; opacity: .55; }
.ai-action-guidance { color: var(--text-secondary); line-height: 1.35; }
.ai-action-guidance a { color: var(--accent); font-weight: 700; }
.duplicate-details { display: grid; gap: .45rem; margin: 1rem 0 0; }
.duplicate-details div { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); gap: .75rem; padding-top: .45rem; border-top: 1px solid var(--border-color); }
.duplicate-details dt { color: var(--text-secondary); font-size: .75rem; font-weight: 700; }
.duplicate-details dd { margin: 0; overflow-wrap: anywhere; font-size: .85rem; }
.duplicate-no-details { margin: 1rem 0 0; color: var(--text-secondary); font-size: .85rem; }
.duplicate-comparison { color: var(--accent); font-size: 1.5rem; font-weight: 700; }
.things-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 240px) auto; gap: .8rem; align-items: end; padding: 1rem; }
.things-toolbar-field { display: grid; min-width: 0; gap: .4rem; }
.things-toolbar-field label { color: var(--text-secondary, var(--app-text-muted)); font-size: .78rem; font-weight: 700; }
.things-toolbar-field .form-control, .things-toolbar-field .form-select { width: 100%; min-width: 0; min-height: 46px; color: var(--text-primary, var(--app-text)); background-color: var(--surface-muted, var(--app-surface-muted)); border-color: var(--border-color, var(--app-border)); }
.things-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin: 1.5rem 0 3rem; }
.thing-card { position: relative; display: grid; grid-template-rows: 142px 1fr; min-height: 300px; overflow: hidden; color: var(--text-primary); transition: transform .15s ease, border-color .15s ease; }
.thing-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.thing-card-actions { position: absolute; top: .8rem; right: .8rem; z-index: 4; display: flex; gap: .45rem; }
.thing-card-actions a { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 1px solid color-mix(in srgb, var(--app-border) 75%, transparent); border-radius: 10px; color: var(--app-text); background: color-mix(in srgb, var(--app-surface-solid) 88%, transparent); box-shadow: 0 5px 16px rgb(0 0 0 / 16%); backdrop-filter: blur(8px); }
.thing-card-actions a:hover, .thing-card-actions a:focus-visible { border-color: var(--app-primary); color: var(--app-primary); transform: translateY(-1px); }
.thing-card-actions svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.thing-card-compact .thing-card-actions { top: .5rem; right: .5rem; gap: .3rem; }
.thing-card-compact .thing-card-actions a { width: 1.9rem; height: 1.9rem; border-radius: 8px; }
.thing-card-compact .thing-card-actions svg { width: .9rem; height: .9rem; }
.thing-card-preview { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; background: var(--surface-muted); color: var(--text-secondary); font-size: 2.25rem; }
.vertex-icon { --vertex-icon-color: var(--app-primary); display: grid; width: 4.5rem; height: 4.5rem; place-items: center; border: 1px solid color-mix(in srgb, var(--vertex-icon-color) 42%, var(--app-border)); border-radius: 1.25rem; color: var(--vertex-icon-color); background: color-mix(in srgb, var(--vertex-icon-color) 12%, var(--app-surface-muted)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%); }
.vertex-icon svg { width: 2.35rem; height: 2.35rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.vertex-icon-calendar { --vertex-icon-color: #3b82c4; }
.vertex-icon-event { --vertex-icon-color: #4f8ed8; }
.vertex-icon-person { --vertex-icon-color: #9a82ff; }
.vertex-icon-business { --vertex-icon-color: #32a886; }
.vertex-icon-file { --vertex-icon-color: #d58a35; }
.vertex-icon-day { --vertex-icon-color: #d455a8; }
.vertex-icon-object { --vertex-icon-color: #7893b8; }
.thing-card-avatar:not([hidden]) + .vertex-icon { display: none; }
.thing-card-preview > img:not(.thing-card-avatar) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.thing-card-preview .thing-card-avatar { width: 116px; height: 116px; border: 3px solid color-mix(in srgb, var(--accent) 35%, var(--border-color)); border-radius: 50%; box-shadow: 0 8px 24px rgb(0 0 0 / 22%); }
.thing-card-compact { grid-template-rows: 112px 1fr; min-height: 205px; border-radius: 14px; }
.thing-card-compact .thing-card-preview .thing-card-avatar { width: 76px; height: 76px; border-width: 2px; }
.thing-card-compact .vertex-icon { width: 3.25rem; height: 3.25rem; border-radius: .9rem; }
.thing-card-compact .vertex-icon svg { width: 1.65rem; height: 1.65rem; }
.thing-card-compact .thing-card-copy { padding: .7rem .75rem .85rem; }
.thing-card-compact .thing-card-copy h2 { margin: .55rem 0 0; font-size: .95rem; line-height: 1.25; }
.thing-card-compact .vertex-type { font-size: .58rem; }
.thing-card-compact .thing-card-date { margin: .35rem 0 0; color: var(--text-secondary); font-size: .66rem; }
.thing-card.has-dated-event,
.on-this-day-card.has-dated-event { --event-color: var(--app-primary); border-color: color-mix(in srgb, var(--event-color) 48%, var(--app-border)); box-shadow: inset 0 3px 0 var(--event-color), var(--app-shadow); }
.has-dated-event.category-birthday,
.has-dated-event.category-anniversary { --event-color: #d455a8; }
.has-dated-event.category-expiration { --event-color: #d97706; }
.has-dated-event.category-renewal { --event-color: #16866b; }
.has-dated-event.category-calendar-event { --event-color: #3b82c4; }
.has-dated-event.category-upload { --event-color: #7357c7; }
.has-dated-event.urgency-overdue { --event-color: #c43d4e; }
.has-dated-event.urgency-due-today { --event-color: #d64c32; }
.has-dated-event.urgency-due-soon { --event-color: #d97706; }
.dated-event-badge { position: relative; display: flex; width: fit-content; max-width: 100%; align-items: center; gap: .3rem; margin: 0 0 .45rem; padding: .28rem .48rem; border: 1px solid color-mix(in srgb, var(--event-color, var(--app-primary)) 38%, var(--app-border)); border-radius: 999px; color: color-mix(in srgb, var(--event-color, var(--app-primary)) 82%, var(--app-text)); background: color-mix(in srgb, var(--event-color, var(--app-primary)) 10%, var(--app-surface)); font-size: .62rem; font-weight: 780; line-height: 1.15; }
.dated-event-icon { display: grid; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--event-color, var(--app-primary)); font-size: .72rem; font-weight: 900; }
.dated-event-label, .dated-event-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dated-event-status { padding-left: .3rem; border-left: 1px solid color-mix(in srgb, var(--event-color, var(--app-primary)) 30%, transparent); color: var(--app-text-muted); font-weight: 680; }
.dated-event-confetti { position: absolute; inset: -7px -5px auto auto; width: 26px; height: 18px; pointer-events: none; }
.dated-event-confetti i { position: absolute; width: 4px; height: 7px; border-radius: 1px; background: #d455a8; opacity: 0; animation: dated-event-confetti-pop .7s ease-out .08s 1 both; }
.dated-event-confetti i:nth-child(1) { left: 1px; top: 8px; rotate: -24deg; }
.dated-event-confetti i:nth-child(2) { left: 7px; top: 1px; rotate: 18deg; background: #f2b94b; animation-delay: .14s; }
.dated-event-confetti i:nth-child(3) { left: 13px; top: 7px; rotate: 45deg; background: #3b82c4; animation-delay: .2s; }
.dated-event-confetti i:nth-child(4) { left: 19px; top: 0; rotate: -12deg; background: #16866b; animation-delay: .1s; }
.dated-event-confetti i:nth-child(5) { left: 23px; top: 9px; rotate: 28deg; background: #d64c32; animation-delay: .24s; }
@keyframes dated-event-confetti-pop {
  0% { opacity: 0; transform: translateY(5px) scale(.6); }
  35% { opacity: 1; }
  100% { opacity: .85; transform: translateY(-5px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .dated-event-confetti i { animation: none; opacity: .85; }
}
.thing-card-copy { min-width: 0; padding: 1.15rem 1.35rem 1.35rem; }
.thing-card h2 { display: -webkit-box; margin: .65rem 0 .35rem; overflow: hidden; overflow-wrap: anywhere; font-size: clamp(1.25rem, 1.75vw, 1.65rem); line-height: 1.15; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.thing-card p { color: var(--text-secondary); }
.thing-card .vertex-type.calendar { color: #67a9e8; background: color-mix(in srgb, #3b82c4 14%, transparent); }
.things-load-sentinel { display: flex; justify-content: center; align-items: center; gap: .65rem; min-height: 90px; color: var(--text-secondary); }
.share-node-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.share-boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.share-boundary-root, .share-boundary-section, .share-next-step { padding: 1.35rem; }
.share-boundary-root { grid-column: 1 / -1; }
.share-boundary-root h2 { margin: .8rem 0 .35rem; }
.share-boundary-root p, .share-boundary-section > p, .share-next-step p { margin-bottom: 0; color: var(--app-text-muted); }
.share-boundary-section h2 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .75rem; font-size: 1.05rem; }
.share-boundary-section h2 span { padding: .2rem .5rem; border-radius: 999px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 11%, transparent); font-size: .68rem; }
.share-boundary-section > div { display: grid; grid-template-columns: minmax(7rem, .65fr) minmax(0, 1fr); gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--app-border); }
.share-boundary-section > div span { color: var(--app-text-muted); overflow-wrap: anywhere; }
.share-boundary-excluded { border-color: color-mix(in srgb, var(--app-danger) 35%, var(--app-border)); }
.share-next-step { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.share-recipient-form { display: flex; align-items: flex-start; gap: .75rem; min-width: min(100%, 32rem); }
.share-recipient-form > div { flex: 1; }
.share-recipient-form label { display: block; margin-bottom: .35rem; font-size: .78rem; font-weight: 700; color: var(--app-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.share-recipient-form .form-control { min-height: 3rem; }
.share-recipient-form > .app-button { margin-top: 1.75rem; }
.share-destination-options { display: grid; gap: .5rem; }
.share-destination-option { display: flex !important; align-items: center; gap: .65rem; padding: .7rem .8rem; border: 1px solid var(--app-border); border-radius: .8rem; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; }
.share-destination-option:has(input:checked) { border-color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 8%, transparent); }
.share-destination-option span { display: grid; }
.share-destination-option small { color: var(--app-text-muted); font-weight: 400; }
#inspectorOpenVertex { margin: .75rem 0; width: 100%; }

@media (max-width: 720px) {
  .things-heading { align-items: stretch; flex-direction: column; }
  .things-toolbar { grid-template-columns: 1fr; }
  .share-node-heading, .share-next-step, .share-recipient-form { align-items: stretch; flex-direction: column; }
  .share-recipient-form > .app-button { margin-top: 0; }
  .share-boundary-grid { grid-template-columns: 1fr; }
  .duplicate-row { grid-template-columns: 1fr; }
  .duplicate-comparison { transform: rotate(90deg); }
  .global-add-menu > div { position: fixed; top: 72px; right: 1rem; left: 1rem; }
}
.link-managed-badge { flex: 0 0 auto; padding: .35rem .55rem; border-radius: 8px; color: var(--app-text-muted); background: var(--app-surface-solid); font-size: .7rem; font-weight: 700; }
.link-target-details { grid-column: 1 / -1; display: grid; gap: .2rem; margin: .45rem 0 0; padding-top: .45rem; border-top: 1px solid var(--app-border); }
.link-target-details > div { display: grid; grid-template-columns: minmax(7rem, .45fr) minmax(0, 1fr); gap: .65rem; }
.link-target-details dt, .link-target-details dd { margin: 0; overflow-wrap: anywhere; font-size: .72rem; }
.link-target-details dt { color: var(--app-text-muted); font-weight: 650; }
.link-target-details dd { color: var(--app-text); }
@media (max-width: 700px) { .relationship-type-picker { grid-template-columns: 1fr; } }
body.theme-dark .detail-editor-table { --bs-table-color: var(--app-text); --bs-table-bg: transparent; --bs-table-border-color: var(--app-border); }
body.theme-dark .detail-editor-table .form-control,
body.theme-dark .detail-editor-table .form-select,
body.theme-dark .detail-parse-form .form-control {
  color: var(--app-text) !important;
  background-color: var(--app-surface-muted) !important;
  border-color: var(--app-border) !important;
  -webkit-text-fill-color: var(--app-text);
  caret-color: var(--app-text);
  color-scheme: dark;
}
body.theme-dark .detail-editor-table .form-control::placeholder { color: var(--app-text-muted); opacity: .8; -webkit-text-fill-color: var(--app-text-muted); }
body.theme-dark .detail-editor-table .form-control:focus,
body.theme-dark .detail-editor-table .form-select:focus,
body.theme-dark .detail-parse-form .form-control:focus { border-color: var(--app-primary) !important; box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary) 25%, transparent); }
body.theme-dark .detail-parse-form input[type="file"]::file-selector-button { color: var(--app-text); background: var(--app-surface-solid); border-color: var(--app-border); }
body.theme-dark .detail-parse-form input[type="file"]::-webkit-file-upload-button { color: var(--app-text); background: var(--app-surface-solid); border-color: var(--app-border); }
@media (max-width: 700px) { .detail-option-card { grid-template-columns: 1fr; }.detail-parse-form { grid-template-columns: 1fr; }.detail-table-heading, .detail-save-bar { align-items: flex-start; flex-direction: column; } }

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0;
  margin-bottom: 60px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Focus styles (from your original) */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ------------------------------
   Light / Dark theme
------------------------------ */

body.theme-light {
  background-color: #f5f5f5;
  color: #111;
}

body.theme-dark {
  background-color: #121212;
  color: #e4e4e4;
}

body.theme-dark a {
  color: #8ab4ff;
}

/* ------------------------------
   Sticky top navbar
------------------------------ */

.top-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid #ddd;
  background-color: #f8f9fa;
}

body.theme-dark .top-nav {
  background-color: #1e1e1e;
  border-bottom-color: #333;
}

.top-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.5rem 1rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Left side: brand + nav links */
.nav-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-brand {
  font-weight: 700;
  font-size: 1.2rem;
  margin-right: 1.25rem;
  text-decoration: none;
  color: #0d47a1;
}

body.theme-dark .nav-brand {
  color: #90caf9;
}

.nav-brand:hover {
  text-decoration: underline;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-link {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.nav-link:hover {
  text-decoration: underline;
}

body.theme-dark .nav-link {
  color: #e4e4e4;
}

/* Right side: dark button + profile */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Icon button (dark mode toggle) */
.icon-button {
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.2rem;
}

/* Avatar */
.nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ccc;
}

.avatar-fallback {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #6c757d;
  color: white;
  font-weight: 600;
}

.avatar-fallback + .nav-avatar {
  margin-left: -32px;
}

.nav-avatar.large {
  width: 40px;
  height: 40px;
}

.nav-username {
  font-weight: 500;
  margin-left: 0.25rem;
}

/* Generic button styles */
.nav-button {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #ffffff;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  color: #333;
}

.nav-button:hover {
  background-color: #e9ecef;
}

.nav-button-primary {
  border-color: var(--app-primary);
  background-color: var(--app-primary);
  color: #ffffff;
}

.nav-button-primary:hover {
  background-color: var(--app-primary-strong);
}

body.theme-dark .nav-button {
  background-color: #2b2b2b;
  border-color: #444;
  color: #e4e4e4;
}

body.theme-dark .nav-button:hover {
  background-color: #3a3a3a;
}

body.theme-dark .nav-button-primary {
  border-color: var(--app-primary);
  background-color: var(--app-primary);
  color: #ffffff;
}

body.theme-dark .nav-button-primary:hover {
  background-color: var(--app-primary-strong);
}

/* ------------------------------
   Profile dropdown
------------------------------ */

.profile-menu {
  position: relative;
}

.profile-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.profile-menu summary::-webkit-details-marker {
  display: none;
}

.profile-dropdown {
  position: absolute;
  right: 0;
  top: 120%;
  min-width: 220px;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid #ddd;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2000;
}

body.theme-dark .profile-dropdown {
  border-color: #333;
  background-color: #1f1f1f;
}

.profile-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 0.5rem;
}

body.theme-dark .profile-dropdown-header {
  border-bottom-color: #333;
}

.profile-name {
  font-weight: 600;
}

.profile-email {
  font-size: 0.8rem;
  color: #666;
}

body.theme-dark .profile-email {
  color: #aaa;
}

.profile-dropdown-links a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 0.25rem 0;
}

.profile-dropdown-links a:hover {
  text-decoration: underline;
}

body.theme-dark .profile-dropdown-links a {
  color: #e4e4e4;
}

.profile-dropdown .w-100 {
  width: 100%;
  margin-top: 0.25rem;
}

/* Close dropdown when clicking elsewhere (details does this by default) */

/* ------------------------------
   Mobile hamburger menu
------------------------------ */

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
}

.nav-toggle-label span {
  display: block;
  width: 18px;
  height: 2px;
  background-color: #333;
}

body.theme-dark .nav-toggle-label span {
  background-color: #e4e4e4;
}

/* Desktop: show full menu */
@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }

  .nav-toggle-label {
    display: none;
  }
}

/* Mobile: stack nav, use hamburger */
@media (max-width: 767.98px) {
  .top-nav-inner {
    flex-wrap: wrap;
  }

  .nav-left {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .nav-right {
    margin-top: 0.4rem;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    margin-top: 0.4rem;
  }

  .nav-toggle-label {
    display: flex;
  }

  .nav-toggle:checked ~ .nav-links {
    display: flex;
  }
}

/* ------------------------------
   Page content
------------------------------ */

.page-content {
  max-width: 1100px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

/* DataValence application shell */
:root {
  --app-bg: #f4f6fb;
  --app-surface: rgba(255, 255, 255, 0.88);
  --app-surface-solid: #ffffff;
  --app-surface-muted: #f0f3f9;
  --app-text: #172033;
  --app-text-muted: #687189;
  --app-border: rgba(25, 39, 74, 0.1);
  --app-primary: #5b5ce2;
  --app-primary-strong: #4546c9;
  --app-primary-rgb: 91, 92, 226;
  --app-accent: #18a999;
  --app-danger: #d24b67;
  --app-shadow: 0 18px 50px rgba(31, 43, 77, 0.08);
  --app-shadow-hover: 0 24px 60px rgba(31, 43, 77, 0.15);
  --app-radius: 22px;
}

html { color-scheme: light; background: #f5f5f5; scroll-behavior: smooth; }
html.theme-dark { color-scheme: dark; background: #0e1220; }

body,
body.theme-light {
  min-height: 100vh;
  margin-bottom: 0;
  overflow-x: hidden;
  color: var(--app-text);
  background:
    radial-gradient(circle at 5% -5%, rgba(91, 92, 226, 0.12), transparent 30rem),
    radial-gradient(circle at 95% 15%, rgba(24, 169, 153, 0.08), transparent 26rem),
    var(--app-bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}

body.theme-dark {
  --app-bg: #0e1220;
  --app-surface: rgba(24, 30, 49, 0.88);
  --app-surface-solid: #181e31;
  --app-surface-muted: #20283d;
  --app-text: #f3f5fb;
  --app-text-muted: #a4adc2;
  --app-border: rgba(255, 255, 255, 0.09);
  --app-primary: #898aff;
  --app-primary-strong: #7475f2;
  --app-primary-rgb: 137, 138, 255;
  --app-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
  --app-shadow-hover: 0 24px 60px rgba(0, 0, 0, 0.34);
  color: var(--app-text);
  background:
    radial-gradient(circle at 5% -5%, rgba(91, 92, 226, 0.2), transparent 30rem),
    radial-gradient(circle at 95% 15%, rgba(24, 169, 153, 0.11), transparent 26rem),
    var(--app-bg);
}

h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.35rem, 5vw, 4.3rem); line-height: 1.02; font-weight: 750; letter-spacing: -0.055em; }
h2 { font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 700; letter-spacing: -0.035em; }

.top-nav,
body.theme-dark .top-nav {
  border-bottom: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
}

.top-nav-inner {
  max-width: 1240px;
  min-height: 74px;
  padding: 0.65rem 1.5rem;
}

.nav-left { gap: 1.25rem; }
.nav-brand,
body.theme-dark .nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: 1.2rem;
  color: var(--app-text);
  font-size: 1.18rem;
  font-weight: 750;
  letter-spacing: -0.035em;
}
.nav-brand:hover { color: var(--app-text); text-decoration: none; }
.brand-mark {
  position: relative;
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--app-primary), #7b61ff);
  box-shadow: 0 8px 20px rgba(91, 92, 226, 0.28);
}
.brand-mark::before,
.brand-mark span {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid white;
  border-radius: 50%;
}
.brand-mark span { position: absolute; transform: translate(6px, -5px); opacity: 0.75; }

.nav-links { gap: 0.35rem; }
.nav-link,
body.theme-dark .nav-link {
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  color: var(--app-text-muted);
  font-size: 0.92rem;
  font-weight: 620;
}
.nav-link:hover { color: var(--app-text); text-decoration: none; background: var(--app-surface-muted); }
.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  color: var(--app-text);
  background: var(--app-surface);
}
.profile-menu summary { gap: 0.55rem; padding: 0.25rem 0.4rem 0.25rem 0.25rem; border-radius: 14px; }
.profile-menu summary:hover { background: var(--app-surface-muted); }
.nav-avatar, .avatar-fallback { width: 38px; height: 38px; border: 2px solid var(--app-surface-solid); box-shadow: 0 0 0 1px var(--app-border); }
.avatar-fallback + .nav-avatar { margin-left: -38px; }
.nav-username { max-width: 130px; overflow: hidden; font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-dropdown,
body.theme-dark .profile-dropdown {
  top: calc(100% + 0.6rem);
  min-width: 270px;
  padding: 0.8rem;
  border: 1px solid var(--app-border);
  border-radius: 18px;
  color: var(--app-text);
  background: var(--app-surface-solid);
  box-shadow: var(--app-shadow-hover);
}
.profile-dropdown-header { padding: 0.5rem 0.45rem 0.85rem; border-color: var(--app-border); }
.profile-dropdown-links a,
body.theme-dark .profile-dropdown-links a { padding: 0.55rem 0.6rem; border-radius: 9px; color: var(--app-text); }
.profile-dropdown-links a:hover { text-decoration: none; background: var(--app-surface-muted); }

.form-control,
.form-select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  color: var(--app-text);
  background-color: var(--app-surface-muted);
  caret-color: var(--app-text);
  -webkit-text-fill-color: var(--app-text);
}
.form-control { padding: .65rem .8rem; }
.form-select { padding-block: .65rem; }
textarea.form-control { min-height: 7rem; resize: vertical; }
input.form-control[type="file"] { padding: .35rem; }
.form-control::placeholder { color: var(--app-text-muted); opacity: .8; -webkit-text-fill-color: var(--app-text-muted); }
.form-control:focus,
.form-select:focus {
  color: var(--app-text);
  background-color: var(--app-surface-muted);
  border-color: var(--app-primary);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary) 24%, transparent);
  -webkit-text-fill-color: var(--app-text);
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  color: var(--app-text-muted);
  background-color: color-mix(in srgb, var(--app-surface-muted) 72%, var(--app-bg));
  opacity: 1;
  -webkit-text-fill-color: var(--app-text-muted);
}
body.theme-dark .form-control,
body.theme-dark .form-select { color-scheme: dark; }
body.theme-dark input.form-control:-webkit-autofill,
body.theme-dark input.form-control:-webkit-autofill:hover,
body.theme-dark input.form-control:-webkit-autofill:focus {
  border-color: var(--app-border);
  -webkit-text-fill-color: var(--app-text);
  box-shadow: 0 0 0 1000px var(--app-surface-muted) inset;
  caret-color: var(--app-text);
}

.page-content { max-width: 1240px; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }
.site-footer { border-top: 1px solid var(--app-border); color: var(--app-text-muted); }
.site-footer-inner { display: flex; width: 100%; max-width: 1240px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 auto; padding: 1.25rem 1.5rem; font-size: .75rem; }
.site-footer nav { display: flex; gap: 1rem; }
.site-footer a { color: var(--app-text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--app-primary); text-decoration: underline; }
.site-version { padding: .22rem .5rem; border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-surface-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; white-space: nowrap; }
.about-heading { max-width: 820px; margin-bottom: 2rem; }
.about-heading h1 { max-width: 760px; font-size: clamp(2.5rem, 7vw, 5.4rem); line-height: .98; letter-spacing: -.055em; }
.about-heading p { max-width: 720px; color: var(--app-text-muted); font-size: 1.08rem; line-height: 1.7; }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.about-card { padding: clamp(1.35rem, 3vw, 2rem); }
.about-card:first-child { grid-column: 1 / -1; }
.about-card h2 { margin: .3rem 0 .8rem; font-size: 1.4rem; }
.about-card p, .about-release-note p { margin: .8rem 0 0; color: var(--app-text-muted); line-height: 1.7; }
.about-version-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.about-version-row .site-version { padding: .45rem .7rem; color: var(--app-primary); font-size: .8rem; }
.about-version-row > span { color: var(--app-text-muted); font-size: .75rem; font-weight: 700; }
.about-release-note { max-width: 760px; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--app-border); }
.app-alert { margin: -1.5rem 0 2rem; border: 0; border-radius: 14px; box-shadow: var(--app-shadow); }
.eyebrow { display: block; margin-bottom: 0.65rem; color: var(--app-primary); font-size: 0.73rem; font-weight: 760; letter-spacing: 0.14em; text-transform: uppercase; }
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-primary-strong);
  --bs-btn-hover-border-color: var(--app-primary-strong);
  --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-primary-strong);
  --bs-btn-active-border-color: var(--app-primary-strong);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-primary-strong);
  --bs-btn-active-border-color: var(--app-primary-strong);
  --bs-btn-disabled-color: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}
.app-button, body.theme-dark a.app-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.15rem; border: 0; border-radius: 12px; color: #fff; background: var(--app-primary); font-weight: 680; text-decoration: none; box-shadow: 0 9px 24px rgba(var(--app-primary-rgb), 0.2); }
.app-button:hover, body.theme-dark a.app-button:hover { color: #fff; background: var(--app-primary-strong); text-decoration: none; transform: translateY(-1px); }
.surface-card { border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); box-shadow: var(--app-shadow); backdrop-filter: blur(12px); }

/* Overview */
.dashboard-heading, .library-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.dashboard-heading > div, .library-heading > div { max-width: 760px; }
.dashboard-heading h1, .library-heading h1 { margin-bottom: 0.8rem; }
.dashboard-heading p, .library-heading p { margin: 0; color: var(--app-text-muted); font-size: 1.08rem; }
.status-pill { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.55rem; padding: 0.55rem 0.8rem; border: 1px solid var(--app-border); border-radius: 999px; color: var(--app-text-muted); background: var(--app-surface); font-size: 0.78rem; font-weight: 650; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #29bb89; box-shadow: 0 0 0 4px rgba(41,187,137,.13); }
.hero-panel { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; padding: clamp(2rem, 5vw, 4.5rem); border: 1px solid var(--app-border); border-radius: 30px; background: linear-gradient(135deg, var(--app-surface-solid), color-mix(in srgb, var(--app-primary) 8%, var(--app-surface-solid))); box-shadow: var(--app-shadow); }
.hero-copy h2 { max-width: 600px; font-size: clamp(2rem, 4vw, 3.5rem); }
.hero-copy p { max-width: 640px; margin-bottom: 1.8rem; color: var(--app-text-muted); font-size: 1.08rem; line-height: 1.7; }
.feature-stack { display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
.feature-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--app-border); border-radius: 16px; background: color-mix(in srgb, var(--app-surface-solid) 76%, transparent); }
.feature-row div { display: flex; flex-direction: column; }
.feature-row small { margin-top: 0.15rem; color: var(--app-text-muted); }
.feature-icon { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 12%, transparent); font-size: 0.75rem; font-weight: 750; }
.landing-hero { margin-top: 1.5rem; align-items: center; }
.landing-focus-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 0; padding: .75rem .85rem .75rem 1rem; }
.landing-focus-banner > div { display: grid; gap: .1rem; }
.landing-focus-banner .eyebrow { margin: 0; }
.landing-focus-selector { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-surface-muted); }
.landing-focus-selector a { padding: .5rem .9rem; border-radius: 999px; color: var(--app-text-muted); font-size: .78rem; font-weight: 800; text-decoration: none; }
.landing-focus-selector a:hover { color: var(--app-text); }
.landing-focus-selector a.active { color: white; background: var(--app-primary); box-shadow: 0 5px 16px color-mix(in srgb, var(--app-primary) 30%, transparent); }
.landing-hero .hero-copy h1 { max-width: 760px; margin: .6rem 0 1.2rem; font-size: clamp(2.7rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.055em; }
.landing-hero .hero-copy p { max-width: 720px; font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.landing-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.landing-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.landing-button-icon { width: 1rem; height: 1rem; margin-left: .55rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.landing-actions a:hover .landing-button-icon, .landing-cta a:hover .landing-button-icon { transform: translateX(.2rem); }
.landing-card-icon, .landing-list-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.landing-card-icon { width: 2.75rem; height: 2.75rem; padding: .65rem; border-radius: 12px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 11%, transparent); }
.landing-graph { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--app-border); border-radius: 22px; background: color-mix(in srgb, var(--app-bg) 76%, transparent); }
.landing-graph-node { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: .8rem; padding: 1rem 1.15rem; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface-solid); }
.landing-graph-node > div { display: grid; gap: .2rem; min-width: 0; }
.landing-graph-icon { width: 2.25rem; height: 2.25rem; padding: .48rem; border-radius: 10px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 11%, transparent); }
.landing-graph-node.primary { border-color: color-mix(in srgb, var(--app-primary) 55%, var(--app-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 10%, transparent); }
.landing-graph-node small, .landing-graph-branch > span { color: var(--app-text-muted); font-size: .66rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.landing-graph-branch { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: .65rem; }
.landing-graph-branch > span { position: relative; padding-left: 1rem; }
.landing-graph-branch > span::before { position: absolute; top: 50%; left: 0; width: .6rem; height: 1px; background: var(--app-primary); content: ''; }
.landing-intro { max-width: 980px; margin: clamp(4rem, 9vw, 8rem) auto; text-align: center; }
.landing-intro h2, .landing-section-heading h2, .landing-principles h2, .landing-cta h2 { margin: .55rem 0 1rem; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.08; letter-spacing: -.04em; }
.landing-intro p { color: var(--app-text-muted); font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.8; }
.landing-agent-story { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); gap: clamp(1.5rem, 4vw, 4rem); margin-bottom: clamp(4rem, 8vw, 7rem); padding: clamp(2rem, 5vw, 4rem); border: 1px solid color-mix(in srgb, var(--app-primary) 30%, var(--app-border)); border-radius: 28px; background: linear-gradient(145deg, color-mix(in srgb, var(--app-primary) 10%, var(--app-surface-solid)), var(--app-surface-solid)); box-shadow: var(--app-shadow); }
.landing-agent-lead h2 { margin: .55rem 0 1rem; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.08; letter-spacing: -.04em; }
.landing-agent-lead p { margin: 0; color: var(--app-text-muted); font-size: 1.02rem; line-height: 1.75; }
.landing-agent-questions { display: grid; gap: .75rem; }
.landing-agent-questions article { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .8rem; align-items: start; padding: 1rem 1.1rem; border: 1px solid var(--app-border); border-radius: 16px; background: color-mix(in srgb, var(--app-surface-solid) 88%, transparent); }
.landing-agent-questions article > span { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 10px; color: white; background: var(--app-primary); font-size: .85rem; }
.landing-agent-questions article > div { display: grid; gap: .25rem; }
.landing-agent-questions strong { color: var(--app-primary); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.landing-agent-questions p { margin: 0; color: var(--app-text); line-height: 1.55; }
.landing-agent-trust { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding-top: 1.25rem; border-top: 1px solid var(--app-border); }
.landing-agent-trust p { margin: 0; color: var(--app-text-muted); font-size: .8rem; line-height: 1.55; }
.landing-agent-trust strong { color: var(--app-text); }
.landing-agent-trust .landing-list-icon { grid-row: auto; }
.landing-agent-trust .integration-secondary { white-space: nowrap; }
.landing-focus-story { margin-bottom: clamp(4rem, 8vw, 7rem); padding: clamp(2rem, 5vw, 4rem); border: 1px solid var(--app-border); border-radius: 28px; background: linear-gradient(145deg, var(--app-surface-solid), color-mix(in srgb, var(--app-primary) 7%, var(--app-surface-solid))); box-shadow: var(--app-shadow); }
.landing-focus-story-lead { max-width: 900px; margin-bottom: 2.25rem; }
.landing-focus-story-lead h2 { margin: .55rem 0 1rem; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.08; letter-spacing: -.04em; }
.landing-focus-story-lead p, .landing-focus-story-grid p { color: var(--app-text-muted); line-height: 1.7; }
.landing-focus-story-lead p { max-width: 760px; font-size: 1.08rem; }
.landing-focus-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.landing-focus-story-grid article { padding: 1.5rem; border: 1px solid var(--app-border); border-radius: 18px; background: color-mix(in srgb, var(--app-surface-solid) 82%, transparent); }
.landing-focus-story-grid article > span { color: var(--app-primary); font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.landing-focus-story-grid h3 { margin: 1.5rem 0 .7rem; font-size: 1.3rem; }
.landing-focus-story-grid p { margin: 0; }
.landing-demo { margin-bottom: clamp(4rem, 8vw, 7rem); scroll-margin-top: 7rem; }
.landing-hero + .landing-demo { margin-top: clamp(3rem, 6vw, 5rem); }
.dashboard-demo { margin-top: 1rem; margin-bottom: 2rem; }
.landing-demo-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.landing-demo-heading h2 { max-width: 760px; margin: .55rem 0 0; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.08; letter-spacing: -.04em; }
.landing-demo-controls { display: flex; flex: 0 0 auto; align-items: center; gap: .65rem; }
.landing-demo-controls button { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid var(--app-border); border-radius: 13px; color: var(--app-text); background: var(--app-surface-solid); font-size: 1.25rem; transition: border-color .18s, color .18s, transform .18s; }
.landing-demo-controls button:hover { border-color: var(--app-primary); color: var(--app-primary); transform: translateY(-2px); }
.landing-demo-count { min-width: 3rem; color: var(--app-text-muted); font-size: .78rem; text-align: center; }
.landing-demo-count b { color: var(--app-text); }
.landing-demo-carousel { position: relative; min-height: 490px; overflow: hidden; border: 1px solid var(--app-border); border-radius: 28px; background: linear-gradient(145deg, var(--app-surface-solid), color-mix(in srgb, var(--app-primary) 7%, var(--app-surface-solid))); box-shadow: var(--app-shadow); cursor: grab; touch-action: pan-y; }
.landing-demo-carousel.is-dragging { cursor: grabbing; user-select: none; }
.landing-demo-side { position: absolute; top: 50%; z-index: 4; display: grid; width: 46px; height: 68px; place-items: center; border: 1px solid var(--app-border); color: var(--app-text); background: color-mix(in srgb, var(--app-surface-solid) 88%, transparent); box-shadow: var(--app-shadow); font-size: 1.25rem; opacity: .72; transform: translateY(-50%); transition: opacity .18s, color .18s, border-color .18s; }
.landing-demo-side.previous { left: .7rem; border-radius: 0 14px 14px 0; }
.landing-demo-side.next { right: .7rem; border-radius: 14px 0 0 14px; }
.landing-demo-side:hover, .landing-demo-side:focus-visible { border-color: var(--app-primary); color: var(--app-primary); opacity: 1; }
.landing-demo-slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(240px, .38fr) minmax(0, .62fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.5rem, 4vw, 3.5rem); visibility: hidden; opacity: 0; transform: translateX(3%); transition: opacity .45s ease, transform .55s ease, visibility .55s; }
.landing-demo-slide.is-active { z-index: 1; visibility: visible; opacity: 1; transform: none; }
.landing-demo-copy h3 { margin: .55rem 0 .8rem; font-size: clamp(1.75rem, 3vw, 3rem); line-height: 1.05; letter-spacing: -.035em; }
.landing-demo-copy p { max-width: 30rem; margin: 0; color: var(--app-text-muted); line-height: 1.7; }
.landing-demo-number { color: var(--app-primary); font-size: .72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.landing-demo-caption { display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: var(--app-text-muted); font-size: .7rem; }
.landing-demo-caption i { width: 7px; height: 7px; border-radius: 50%; background: #27b987; box-shadow: 0 0 0 4px color-mix(in srgb, #27b987 14%, transparent); }
.landing-demo-dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1rem; }
.landing-demo-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--app-text-muted) 35%, transparent); transition: width .25s, background .25s; }
.landing-demo-dots button.is-active { width: 28px; background: var(--app-primary); }
.demo-stage { min-width: 0; perspective: 1000px; }
.demo-window { overflow: hidden; border: 1px solid color-mix(in srgb, var(--app-border) 80%, white); border-radius: 20px; background: var(--app-bg); box-shadow: 0 28px 70px rgba(10, 13, 30, .24); transform: rotateY(-2deg) rotateX(1deg); }
.demo-window-bar { display: flex; align-items: center; gap: .35rem; height: 42px; padding: 0 .9rem; border-bottom: 1px solid var(--app-border); color: var(--app-text-muted); background: var(--app-surface-solid); font-size: .68rem; }
.demo-window-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-border); }
.demo-window-bar span { margin-left: .4rem; }
.demo-import-action { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; margin: .85rem; padding: .8rem; border: 1px solid var(--app-border); border-radius: 13px; background: var(--app-surface-solid); }
.demo-contact-action-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: white; background: var(--app-primary); font-weight: 800; }
.demo-contact-action-icon.google { background: linear-gradient(135deg, #4a90e2, #34a853); }
.demo-import-action div, .demo-activity div { display: grid; }
.demo-import-action small, .demo-activity small { color: var(--app-text-muted); font-size: .63rem; }
.demo-import-action button { padding: .45rem .7rem; border: 0; border-radius: 8px; color: white; background: var(--app-primary); font-size: .66rem; font-weight: 700; }
.demo-activity { display: flex; align-items: center; gap: .65rem; margin: 0 .85rem; padding: .75rem; border-radius: 12px; background: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface-solid)); opacity: 0; transform: translateY(-8px); }
.demo-spinner { width: 24px; height: 24px; border: 3px solid color-mix(in srgb, var(--app-primary) 22%, transparent); border-top-color: var(--app-primary); border-radius: 50%; }
.demo-contact-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; padding: .85rem; }
.demo-person-card { display: grid; justify-items: center; gap: .25rem; min-width: 0; padding: .8rem .35rem; border: 1px solid var(--app-border); border-radius: 13px; background: var(--app-surface-solid); opacity: 0; transform: translateY(15px); }
.demo-person-card small { color: var(--app-primary); font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.demo-person-card strong { max-width: 100%; overflow: hidden; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.demo-avatar { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: white; font-size: .67rem; font-style: normal; font-weight: 800; }
.demo-avatar.coral { background: linear-gradient(135deg, #ef7d7d, #ad4770); }
.demo-avatar.blue { background: linear-gradient(135deg, #66a8ec, #5363c9); }
.demo-avatar.green { background: linear-gradient(135deg, #55c6a0, #278672); }
.demo-avatar svg { width: 100%; height: 100%; fill: color-mix(in srgb, white 24%, transparent); stroke: white; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.demo-receipt-layout { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem; align-items: center; min-height: 330px; padding: 1.3rem; }
.demo-receipt-evidence { position: relative; display: grid; gap: .6rem; }
.demo-bike-image { display: block; width: 100%; aspect-ratio: 2 / 1; border-radius: 12px; object-fit: cover; background: var(--app-surface-solid); }
.demo-subject-card { display: grid; min-height: 120px; align-content: center; justify-items: center; gap: .35rem; padding: 1rem; border: 1px solid var(--app-border); border-radius: 12px; color: var(--app-text); background: linear-gradient(145deg, color-mix(in srgb, var(--app-primary) 13%, var(--app-surface-solid)), var(--app-surface-solid)); text-align: center; }
.demo-subject-card svg, .demo-record-cover svg { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--app-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.demo-subject-card small { color: var(--app-primary); font-size: .55rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.demo-subject-card strong { font-size: .76rem; }
.demo-paper { display: grid; gap: .45rem; padding: 1.4rem 1rem; color: #24252b; background: #fffdf7; box-shadow: 0 12px 30px rgba(0,0,0,.17); transform: rotate(-2deg); }
.demo-paper span { font-size: .58rem; font-weight: 800; letter-spacing: .08em; }
.demo-paper b { font-size: 1rem; }
.demo-paper small { padding-bottom: .3rem; border-bottom: 1px dashed #c8c5bb; font-size: .62rem; }
.demo-paper strong { margin-top: .6rem; text-align: right; }
.demo-scan-line { position: absolute; top: 20%; left: 4%; width: 37%; height: 2px; background: linear-gradient(90deg, transparent, #7b78ff, transparent); box-shadow: 0 0 12px #7b78ff; opacity: 0; }
.demo-facts { display: grid; gap: .5rem; }
.demo-facts > span { color: var(--app-primary); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.demo-facts > div:not(.demo-connected) { display: grid; gap: .12rem; padding: .55rem .7rem; border: 1px solid var(--app-border); border-radius: 9px; background: var(--app-surface-solid); opacity: 0; transform: translateX(14px); }
.demo-facts small { color: var(--app-text-muted); font-size: .56rem; }
.demo-facts strong { font-size: .73rem; }
.demo-connected { padding: .5rem .7rem; border-radius: 8px; color: #1b805f; background: color-mix(in srgb, #27b987 13%, transparent); font-size: .64rem; font-weight: 700; opacity: 0; }
.demo-record-example { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem; align-items: center; min-height: 330px; padding: 1.25rem; }
.demo-record-example-card { display: grid; min-height: 225px; align-content: center; justify-items: center; gap: .45rem; padding: 1.2rem; border: 1px solid var(--app-border); border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--app-primary) 15%, var(--app-surface-solid)), var(--app-surface-solid)); text-align: center; }
.demo-record-example-card svg { width: 3.3rem; height: 3.3rem; margin-bottom: .4rem; fill: none; stroke: var(--app-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.demo-record-example-card small { color: var(--app-primary); font-size: .55rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.demo-record-example-card strong { font-size: .82rem; }
.demo-record-example-card span { color: var(--app-text-muted); font-size: .58rem; line-height: 1.4; }
.demo-record-example-details { display: grid; gap: .55rem; }
.demo-record-example-details > span { color: var(--app-primary); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.demo-record-example-details > div:not(.demo-connected) { display: grid; gap: .15rem; padding: .7rem; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-surface-solid); }
.demo-record-example-details small { color: var(--app-text-muted); font-size: .55rem; }
.demo-record-example-details strong { font-size: .68rem; }
.demo-connected.is-visible { opacity: 1; }
.demo-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; min-height: 330px; padding: .9rem; }
.demo-week > div { min-width: 0; padding: .5rem .35rem; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-surface-solid); }
.demo-week > div > span { color: var(--app-text-muted); font-size: .48rem; font-weight: 800; }
.demo-week > div > b { display: block; margin-bottom: .7rem; font-size: .9rem; }
.demo-event { display: grid; gap: .15rem; min-width: 0; padding: .45rem; border-radius: 8px; opacity: 0; transform: translateY(18px); }
.demo-event.lilac { background: color-mix(in srgb, #8582ff 14%, var(--app-surface-solid)); }
.demo-event.coral { background: color-mix(in srgb, #e56f86 14%, var(--app-surface-solid)); }
.demo-event.green { background: color-mix(in srgb, #27b987 14%, var(--app-surface-solid)); }
.demo-event .demo-avatar { width: 30px; height: 30px; margin-bottom: .25rem; font-size: .48rem; }
.demo-event small, .demo-event em { overflow: hidden; color: var(--app-text-muted); font-size: .48rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.demo-event strong { overflow: hidden; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.demo-enrich-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 1rem; min-height: 330px; padding: 1.15rem; }
.demo-book-card { display: grid; align-content: start; gap: .75rem; padding: .8rem; border: 1px solid var(--app-border); border-radius: 13px; background: var(--app-surface-solid); }
.demo-book-cover { display: grid; align-content: space-between; aspect-ratio: 4 / 5; padding: 1rem; color: #fff8e9; background: linear-gradient(145deg, #2e635f, #172c35); box-shadow: 0 12px 25px rgba(0,0,0,.22); }
.demo-book-cover span { font-size: .48rem; letter-spacing: .18em; }
.demo-book-cover strong { font-family: Georgia, serif; font-size: clamp(.8rem, 1.5vw, 1.15rem); line-height: .95; letter-spacing: .05em; }
.demo-book-cover small { font-family: Georgia, serif; font-size: .5rem; }
.demo-record-cover { display: grid; min-height: 160px; align-content: center; justify-items: center; gap: .75rem; padding: 1rem; border-radius: 4px; color: var(--app-text); background: linear-gradient(145deg, color-mix(in srgb, var(--app-primary) 18%, var(--app-surface-solid)), var(--app-surface-solid)); box-shadow: 0 12px 25px rgba(0,0,0,.16); }
.demo-record-cover span { color: var(--app-primary); font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.demo-book-card > div:last-child { display: grid; gap: .18rem; }
.demo-book-card > div:last-child small { color: var(--app-primary); font-size: .52rem; font-weight: 800; text-transform: uppercase; }
.demo-book-card > div:last-child strong { font-size: .72rem; }
.demo-book-card > div:last-child span { color: var(--app-text-muted); font-size: .58rem; }
.demo-ai-panel { display: grid; align-content: start; gap: .6rem; min-width: 0; padding: .85rem; border: 1px solid var(--app-border); border-radius: 13px; background: color-mix(in srgb, var(--app-primary) 6%, var(--app-surface-solid)); }
.demo-ai-label { color: var(--app-primary); font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.demo-ai-question { padding: .65rem; border-radius: 9px; color: var(--app-text); background: var(--app-surface-solid); font-size: .66rem; }
.demo-ai-thinking { display: flex; gap: .22rem; padding: .35rem 0; }
.demo-ai-thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--app-primary); opacity: .3; }
.demo-ai-answer { padding: .7rem; border: 1px solid color-mix(in srgb, var(--app-primary) 24%, var(--app-border)); border-radius: 9px; background: var(--app-surface-solid); opacity: 0; transform: translateY(8px); }
.demo-ai-answer strong { font-size: .68rem; }
.demo-ai-answer p { margin: .3rem 0 0; color: var(--app-text-muted); font-size: .6rem; line-height: 1.45; }
.demo-ai-source { display: block; margin-top: .45rem; color: var(--app-primary); font-size: .5rem; font-weight: 750; letter-spacing: .02em; }
.demo-ai-follow-ups { display: flex; flex-wrap: wrap; gap: .3rem; opacity: 0; transform: translateY(8px); }
.demo-ai-follow-ups span { padding: .28rem .42rem; border: 1px solid var(--app-border); border-radius: 999px; color: var(--app-text-muted); background: var(--app-surface-solid); font-size: .48rem; line-height: 1.2; }
.demo-save-note { justify-self: start; padding: .5rem .7rem; border: 0; border-radius: 8px; color: white; background: var(--app-primary); font-size: .62rem; font-weight: 700; opacity: 0; }
.demo-note-saved { padding: .5rem .65rem; border-radius: 8px; color: #1b805f; background: color-mix(in srgb, #27b987 13%, transparent); font-size: .58rem; font-weight: 700; opacity: 0; transform: translateY(6px); }
.landing-demo-slide.is-active .demo-import-action button { animation: demo-press 6.8s ease infinite; }
.landing-demo-slide.is-active .demo-activity { animation: demo-reveal 6.8s ease .7s infinite; }
.landing-demo-slide.is-active .demo-spinner { animation: demo-spin .8s linear infinite; }
.landing-demo-slide.is-active .demo-person-card { animation: demo-card-in 6.8s ease 1.8s infinite; }
.landing-demo-slide.is-active .demo-person-card:nth-child(2) { animation-delay: 2.05s; }
.landing-demo-slide.is-active .demo-person-card:nth-child(3) { animation-delay: 2.3s; }
.landing-demo-slide.is-active .demo-scan-line { animation: demo-scan 6.8s ease .3s infinite; }
.landing-demo-slide.is-active .demo-facts > div { animation: demo-fact-in 6.8s ease 1.5s infinite; }
.landing-demo-slide.is-active .demo-facts > div:nth-of-type(2) { animation-delay: 1.75s; }
.landing-demo-slide.is-active .demo-facts > div:nth-of-type(3) { animation-delay: 2s; }
.landing-demo-slide.is-active .demo-facts > .demo-connected { animation-delay: 2.45s; }
.landing-demo-slide.is-active .demo-event { animation: demo-card-in 6.8s ease .65s infinite; }
.demo-calendar-sync { display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; border-bottom: 1px solid var(--app-border); background: color-mix(in srgb, var(--app-primary) 6%, var(--app-surface-solid)); }
.demo-calendar-sync > span:first-child { display: grid; margin-right: auto; }
.demo-calendar-sync b { font-size: .75rem; }
.demo-calendar-sync small, .demo-calendar-open { color: var(--app-text-muted); font-size: .62rem; }
.demo-calendar-sync button { padding: .4rem .7rem; border: 0; border-radius: 8px; color: white; background: var(--app-primary); font-size: .65rem; font-weight: 750; }
.demo-calendar-open { white-space: nowrap; }
.landing-demo-slide.is-active .demo-week > div:nth-child(4) .demo-event { animation-delay: 1.05s; }
.landing-demo-slide.is-active .demo-week > div:nth-child(5) .demo-event { animation-delay: 1.45s; }
.landing-demo-slide.is-active .demo-ai-thinking i { animation: demo-thinking .9s ease-in-out infinite; }
.landing-demo-slide.is-active .demo-ai-thinking i:nth-child(2) { animation-delay: .15s; }
.landing-demo-slide.is-active .demo-ai-thinking i:nth-child(3) { animation-delay: .3s; }
.landing-demo-slide.is-active .demo-ai-answer { animation: demo-ai-in 6.8s ease 1.3s infinite; }
.landing-demo-slide.is-active .demo-ai-follow-ups { animation: demo-ai-in 6.8s ease 1.8s infinite; }
.landing-demo-slide.is-active .demo-save-note { animation: demo-ai-in 6.8s ease 2.3s infinite; }
.landing-demo-slide.is-active .demo-note-saved { animation: demo-ai-in 6.8s ease 3.1s infinite; }
@keyframes demo-press { 0%,8%,100% { transform: none; } 12% { transform: scale(.92); } 16%,88% { transform: none; } }
@keyframes demo-reveal { 0%,10%,100% { opacity: 0; transform: translateY(-8px); } 18%,88% { opacity: 1; transform: none; } }
@keyframes demo-spin { to { transform: rotate(360deg); } }
@keyframes demo-card-in { 0%,20%,100% { opacity: 0; transform: translateY(15px); } 30%,88% { opacity: 1; transform: none; } }
@keyframes demo-scan { 0%,8%,100% { top: 20%; opacity: 0; } 14% { opacity: 1; } 38% { top: 76%; opacity: 1; } 43%,88% { top: 76%; opacity: 0; } }
@keyframes demo-fact-in { 0%,22%,100% { opacity: 0; transform: translateX(14px); } 32%,88% { opacity: 1; transform: none; } }
@keyframes demo-thinking { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes demo-ai-in { 0%,20%,100% { opacity: 0; transform: translateY(8px); } 30%,88% { opacity: 1; transform: none; } }
.landing-use-cases { margin-bottom: clamp(4rem, 8vw, 7rem); }
.landing-use-case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.landing-use-case-grid article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem 1rem; align-items: center; padding: 1.35rem 1.5rem; border: 1px solid var(--app-border); border-radius: 18px; background: var(--app-surface-solid); }
.landing-use-case-grid .landing-card-icon { grid-row: 1 / span 2; }
.landing-use-case-grid strong { font-size: 1.05rem; }
.landing-use-case-grid span { color: var(--app-text-muted); line-height: 1.6; }
.landing-section-heading { max-width: 800px; margin-bottom: 2rem; }
.landing-principle-list span, .landing-cta p { color: var(--app-text-muted); line-height: 1.65; }
.landing-principles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); margin-top: clamp(4rem, 8vw, 7rem); padding: clamp(2rem, 5vw, 4rem); border-radius: 28px; }
.landing-principles h2 { font-size: clamp(1.8rem, 3.3vw, 3rem); }
.landing-principles > div > p { max-width: 34rem; color: var(--app-text-muted); line-height: 1.7; }
.landing-principle-list { display: grid; gap: .5rem; }
.landing-principle-list div { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .3rem .75rem; padding: 1rem 0; border-bottom: 1px solid var(--app-border); }
.landing-list-icon { grid-row: 1 / span 2; width: 1.8rem; height: 1.8rem; padding: .3rem; border-radius: 8px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 11%, transparent); }
.landing-principle-list div:last-child { border-bottom: 0; }
.landing-cta { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin: clamp(4rem, 8vw, 7rem) 0 2rem; padding: clamp(2rem, 5vw, 4rem); border-radius: 28px; color: white; background: linear-gradient(135deg, color-mix(in srgb, var(--app-primary) 82%, #11162b), #11162b); }
.landing-cta h2 { margin-bottom: .5rem; }
.landing-cta p { margin: 0; color: color-mix(in srgb, white 72%, transparent); }
.landing-cta .app-button { flex: 0 0 auto; color: #11162b; background: white; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .38fr); gap: 1.25rem; }
.search-panel { padding: clamp(1.5rem, 4vw, 2.35rem); }
.search-panel h2 { margin: .35rem 0 .55rem; }
.search-panel p { max-width: 44rem; margin: 0; color: var(--app-text-muted); }
.search-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 13rem) auto; gap: .7rem; margin-top: 1.5rem; }
.search-form .form-control { min-width: 0; min-height: 52px; border: 1px solid var(--app-border); border-radius: 13px; color: var(--app-text); background: var(--app-surface-muted); }
.search-form .search-type-select { min-height: 52px; border: 1px solid var(--app-border); border-radius: 13px; color: var(--app-text); background-color: var(--app-surface-muted); }
.search-form .app-button { min-height: 52px; }
.search-summary { margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 12px; background: var(--app-surface-muted); }
.library-cta { display: flex; flex-direction: column; justify-content: space-between; gap: 1.75rem; min-height: 100%; padding: 1.75rem; color: var(--app-text); text-decoration: none; background: linear-gradient(145deg, var(--app-primary), #7778ee); }
.library-cta .eyebrow, .library-cta span { color: rgba(255,255,255,.76); }
.library-cta strong { color: white; font-size: 1.55rem; }
.library-cta:hover { color: white; transform: translateY(-2px); box-shadow: var(--app-shadow-hover); }
.stats-section { margin-top: 3.2rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 1.15rem; }
.section-heading h2 { margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.stat-card { padding: 1.35rem; border: 1px solid var(--app-border); border-radius: 18px; background: var(--app-surface); }
.stat-card strong { display: block; margin: 0.45rem 0 0.1rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.06em; }
.stat-card small, .stat-label { color: var(--app-text-muted); }
.edge-stats { margin-top: 1rem; padding: 1.4rem; }
.edge-stats-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.edge-stats-heading h3 { margin: .25rem 0 0; font-size: 1.25rem; }
.edge-total { padding: .35rem .7rem; border-radius: 999px; background: var(--app-surface-muted); color: var(--app-text-muted); font-size: .8rem; white-space: nowrap; }
.edge-stat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1.5rem; }
.edge-stat-row { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(4rem, 2fr) 2.5rem; align-items: center; gap: .75rem; }
.edge-stat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--app-text-muted); font-size: .9rem; }
.edge-stat-track { height: .45rem; overflow: hidden; border-radius: 999px; background: var(--app-surface-muted); }
.edge-stat-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--app-accent), var(--app-accent-soft)); }
.node-stat-fill { background: linear-gradient(90deg, var(--app-primary), #56b6d8); }
.edge-stat-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.edge-empty { margin: 0; color: var(--app-text-muted); }
.search-notice { margin-top: 1rem; padding: .75rem 1rem; border-radius: 12px; font-size: .85rem; }
.search-notice.success { color: #087e60; background: color-mix(in srgb, #0f9f7a 10%, var(--app-surface)); }
.search-notice.error { color: var(--app-danger); background: color-mix(in srgb, var(--app-danger) 10%, var(--app-surface)); }

/* Inbox */
.inbox-nav-button { position: relative; text-decoration: none; }
.inbox-nav-button svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inbox-nav-badge { position: absolute; top: -4px; right: -6px; display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; border: 2px solid var(--app-bg); border-radius: 999px; color: white; background: var(--app-danger); font-size: .58rem; font-weight: 850; line-height: 1; }
.inbox-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.inbox-heading h1 { margin: .35rem 0 .75rem; }
.inbox-heading p { margin: 0; color: var(--app-text-muted); font-size: 1.05rem; }
.inbox-total { flex: 0 0 auto; color: var(--app-text-muted); font-size: .8rem; font-weight: 750; }
.search-notice + .inbox-filters { margin-top: 1rem; }
.inbox-filters { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) auto; align-items: end; gap: 1rem; margin-bottom: 1rem; padding: 1rem; }
.inbox-filters label { display: grid; gap: .4rem; color: var(--app-text-muted); font-size: .72rem; font-weight: 750; text-transform: uppercase; }
.inbox-empty { display: grid; min-height: 320px; place-items: center; align-content: center; gap: .8rem; padding: 2rem; text-align: center; }
.inbox-empty svg { width: 3.5rem; height: 3.5rem; fill: none; stroke: var(--app-primary); stroke-width: 1.5; }
.inbox-empty h2, .inbox-empty p { margin: 0; }
.inbox-empty p { max-width: 30rem; color: var(--app-text-muted); }
.inbox-list { overflow: hidden; }
.inbox-list-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--app-border); }

/* Workspace context */
.workspace-switcher { position: relative; }
.workspace-switcher > summary { display: grid; min-width: 9rem; padding: .45rem .7rem; cursor: pointer; list-style: none; border: 1px solid var(--app-border); border-radius: 10px; line-height: 1.1; }
.workspace-switcher > summary::-webkit-details-marker { display: none; }
.workspace-switcher > summary span { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 750; }
.workspace-switcher > summary small { color: var(--app-text-muted); font-size: .6rem; }
.workspace-switcher-menu { position: absolute; z-index: 80; top: calc(100% + .5rem); left: 0; display: grid; width: 18rem; overflow: hidden; padding: .5rem; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface); box-shadow: var(--app-shadow-lg); }
.workspace-switcher-menu form, .workspace-switcher-menu button { width: 100%; }
.workspace-switcher-menu button { display: grid; padding: .65rem .75rem; text-align: left; border: 0; border-radius: 9px; color: var(--app-text); background: transparent; }
.workspace-switcher-menu button:hover, .workspace-switcher-menu button.active { background: var(--app-surface-muted); }
.workspace-switcher-menu button span { color: var(--app-text-muted); font-size: .7rem; text-transform: capitalize; }
.workspace-switcher-menu > a { margin-top: .35rem; padding: .7rem .75rem; border-top: 1px solid var(--app-border); text-decoration: none; font-size: .78rem; font-weight: 750; }
.workspace-create-shell { display: grid; grid-template-columns: minmax(15rem, .75fr) minmax(20rem, 1fr); gap: 3rem; max-width: 70rem; margin: 3rem auto; align-items: start; }
.workspace-create-copy h1 { margin: .5rem 0 1rem; }
.workspace-create-copy p { color: var(--app-text-muted); font-size: 1.05rem; }
.workspace-create-form { display: grid; gap: 1rem; padding: 1.5rem; }
.workspace-create-form fieldset { display: grid; gap: .7rem; margin: 0; padding: 0; border: 0; }
.workspace-create-form legend, .workspace-create-form > label { font-size: .78rem; font-weight: 750; }
.workspace-kind-option { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--app-border); border-radius: 12px; cursor: pointer; }
.workspace-kind-option:has(input:checked) { border-color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface)); }
.workspace-kind-option span { display: grid; gap: .25rem; }
.workspace-kind-option small { color: var(--app-text-muted); }
.workspace-create-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: .5rem; }
.workspace-manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.workspace-members, .workspace-invite, .workspace-invitations { padding: 1.5rem; }
.workspace-members h2, .workspace-invite h2, .workspace-invitations h2 { margin-top: 0; }
.workspace-members > div { display: flex; gap: .75rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--app-border); }
.workspace-members p { display: grid; margin: 0; }
.workspace-members small, .workspace-invite > p, .workspace-invitations small, .workspace-section-heading p, .workspace-empty { color: var(--app-text-muted); }
.workspace-member-action { margin-left: auto; }
.workspace-member-action + .workspace-member-action { margin-left: 0; }
.workspace-member-action select, .workspace-member-action button { min-height: 32px; border: 1px solid var(--app-border); border-radius: 7px; color: var(--app-text); background: var(--app-surface-muted); font-size: .7rem; }
.workspace-member-action .danger { color: var(--app-danger); }
.workspace-invite form, .workspace-invite label { display: grid; gap: .5rem; }
.workspace-invite form { gap: 1rem; }
.workspace-invitations { grid-column: 1 / -1; }
.workspace-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.workspace-section-heading h2, .workspace-section-heading p { margin-bottom: .2rem; }
.workspace-section-heading > span { min-width: 2rem; padding: .25rem .6rem; border-radius: 999px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 12%, transparent); text-align: center; font-size: .72rem; font-weight: 800; }
.workspace-invitation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.25rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--app-border); }
.workspace-invitation-row:last-child { border-bottom: 0; }
.workspace-invitation-person { display: flex; gap: .75rem; align-items: center; min-width: 0; }
.workspace-invitation-person p, .workspace-invitation-dates { display: grid; gap: .15rem; margin: 0; }
.workspace-invitation-person strong, .workspace-invitation-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-invitation-dates { color: var(--app-text-muted); font-size: .72rem; }
.workspace-invitation-status { font-weight: 800; text-transform: capitalize; }
.workspace-invitation-status.expired { color: var(--app-danger); }
.workspace-invitation-status.pending { color: var(--app-primary); }
.workspace-invitation-actions { display: flex; gap: .5rem; }
.workspace-invitation-actions button { min-height: 34px; padding: .35rem .7rem; border: 1px solid var(--app-border); border-radius: 7px; color: var(--app-text); background: var(--app-surface-muted); font-size: .72rem; font-weight: 750; }
.workspace-invitation-actions button.danger { color: var(--app-danger); }
.inbox-list-item:last-child { border-bottom: 0; }
.inbox-list-item.state-unread { background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface-solid)); }
.inbox-list-item.state-unread::before { position: absolute; top: 1.25rem; left: .85rem; width: 7px; height: 7px; border-radius: 50%; background: var(--app-primary); content: ''; }
.inbox-message-link { display: grid; gap: .28rem; min-width: 0; padding: 1.1rem 1rem 1.1rem 1.65rem; color: var(--app-text); text-decoration: none; }
.inbox-share-thumbnail { grid-row: 1 / span 4; width: 104px; height: 82px; margin-right: .8rem; border: 1px solid var(--app-border); border-radius: 12px; object-fit: cover; }
.inbox-message-link:has(.inbox-share-thumbnail) { grid-template-columns: auto minmax(0, 1fr); }
.inbox-message-link:has(.inbox-share-thumbnail) > :not(.inbox-share-thumbnail) { grid-column: 2; }
.inbox-message-link:hover { color: var(--app-text); background: color-mix(in srgb, var(--app-primary) 4%, transparent); }
.inbox-message-link > span:not(.inbox-source) { overflow: hidden; color: var(--app-text-muted); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.inbox-message-link time { color: var(--app-text-muted); font-size: .7rem; }
.inbox-source { color: var(--app-primary); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.inbox-inline-action { padding: .45rem .65rem; border: 0; color: var(--app-primary); background: transparent; font-size: .75rem; font-weight: 750; }
.inbox-inline-action:hover { text-decoration: underline; }
.inbox-inline-action.danger { color: var(--app-danger); }
.inbox-list-actions { display: flex; align-items: center; gap: .15rem; padding-right: 1rem; }
.inbox-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--app-text-muted); font-size: .8rem; }
.inbox-pagination a { font-weight: 750; text-decoration: none; }
.inbox-detail { max-width: 900px; padding: clamp(1.5rem, 5vw, 3.5rem); }
.inbox-detail > header { display: flex; align-items: start; justify-content: space-between; gap: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--app-border); }
.inbox-detail h1 { margin: .5rem 0 0; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; }
.inbox-detail time, .inbox-expiry { color: var(--app-text-muted); font-size: .78rem; }
.inbox-detail-body { margin: 2rem 0; color: var(--app-text); font-size: 1.05rem; line-height: 1.75; white-space: pre-wrap; }
.inbox-expiry { padding: .75rem 1rem; border-radius: 10px; background: var(--app-surface-muted); }
.inbox-action-panel { margin: 2rem 0; padding: 1.25rem; border: 1px solid color-mix(in srgb, var(--app-primary) 35%, var(--app-border)); border-radius: 16px; background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface-solid)); }
.inbox-action-panel p { color: var(--app-text-muted); }
.inbox-action-panel > div { display: flex; gap: .75rem; }
.inbox-share-summary { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1fr); gap: 1.5rem; margin: 2rem 0; padding: 1.25rem; border: 1px solid var(--app-border); border-radius: 18px; background: var(--app-surface-muted); }
.inbox-share-preview-link { display: grid; align-content: start; gap: .5rem; color: var(--app-primary); font-size: .75rem; font-weight: 750; text-decoration: none; }
.inbox-share-preview-link img { width: 100%; max-height: 300px; border-radius: 14px; object-fit: contain; background: var(--app-bg); }
.inbox-share-summary h2 { margin: .6rem 0; }
.inbox-share-summary dl { display: grid; grid-template-columns: minmax(7rem, .6fr) 1fr; gap: .75rem; margin: 0; padding: .45rem 0; border-top: 1px solid var(--app-border); }
.inbox-share-summary dt { font-weight: 750; }
.inbox-share-summary dd { margin: 0; color: var(--app-text-muted); overflow-wrap: anywhere; }
.inbox-share-summary small { display: block; margin-top: 1rem; color: var(--app-text-muted); }
.inbox-detail > footer { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--app-border); }
.app-confirm-modal .modal-content { overflow: hidden; border: 1px solid color-mix(in srgb, var(--app-danger) 30%, var(--app-border)); border-radius: 24px; color: var(--app-text); background: var(--app-surface-solid); box-shadow: 0 30px 90px rgba(16,24,40,.3); }
.app-confirm-modal .modal-header, .app-confirm-modal .modal-footer { padding: 1.25rem 1.5rem; border-color: var(--app-border); }
.app-confirm-modal .modal-title { margin: .25rem 0 0; font-size: 1.35rem; }
.app-confirm-modal .modal-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.5rem; }
.app-confirm-modal .modal-body p { margin: 0; color: var(--app-text-muted); line-height: 1.6; }
.app-confirm-symbol { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid color-mix(in srgb, var(--app-danger) 35%, transparent); border-radius: 50%; color: var(--app-danger); background: color-mix(in srgb, var(--app-danger) 10%, transparent); font-size: 1.25rem; font-weight: 850; }
.app-confirm-danger { border: 1px solid color-mix(in srgb, var(--app-danger) 75%, black); color: white; background: var(--app-danger); font-weight: 800; }
.app-confirm-danger:hover, .app-confirm-danger:focus { color: white; background: color-mix(in srgb, var(--app-danger) 84%, black); }
.search-results { margin-top: 1rem; padding: 1.4rem; }
.search-results-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.search-results-heading h2 { margin: .2rem 0 0; font-size: 1.35rem; }
.search-results-heading > span { color: var(--app-text-muted); font-size: .8rem; }
.search-table-wrap { overflow-x: auto; }
.search-results-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.search-results-table th { padding: .65rem; color: var(--app-text-muted); font-size: .68rem; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
.search-results-table td { padding: .65rem; border-top: 1px solid var(--app-border); vertical-align: middle; }
.vertex-type { display: inline-block; padding: .28rem .45rem; border-radius: 7px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 10%, transparent); font-size: .62rem; font-weight: 750; text-transform: uppercase; }
.vertex-open { padding: .4rem .65rem; border: 1px solid var(--app-border); border-radius: 8px; color: var(--app-primary); background: var(--app-surface-solid); font-size: .72rem; font-weight: 700; }
.vertex-result-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.vertex-full-edit { text-decoration: none; }
.vertex-editor-form { display: grid; gap: 1rem; padding-bottom: 3rem; }
.vertex-editor-metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1rem; margin: 1rem 0 0; }
.vertex-editor-metadata div { min-width: 0; padding: .65rem; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-surface-muted); }
.vertex-editor-metadata dt { color: var(--app-text-muted); font-size: .68rem; }
.vertex-editor-metadata dd { margin: .2rem 0 0; overflow-wrap: anywhere; color: var(--app-text); font-size: .78rem; }
.vertex-editor-details, .vertex-editor-links { display: grid; gap: .8rem; margin-top: 1rem; }
.recurring-event-group { overflow: hidden; border: 1px solid color-mix(in srgb, var(--app-primary) 24%, var(--app-border)); border-radius: 13px; background: color-mix(in srgb, var(--app-primary) 4%, var(--app-surface-muted)); }
.recurring-event-group > summary { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .85rem; cursor: pointer; list-style: none; }
.recurring-event-group > summary::-webkit-details-marker { display: none; }
.recurring-event-group > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--app-primary) 35%, transparent); outline-offset: -3px; }
.recurring-event-summary-icon { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 10px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface)); }
.recurring-event-summary-icon svg, .recurring-event-occurrence > svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.recurring-event-summary-copy { display: grid; gap: .18rem; min-width: 0; }
.recurring-event-summary-copy strong { overflow: hidden; color: var(--app-text); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.recurring-event-summary-copy small { color: var(--app-text-muted); font-size: .67rem; text-transform: capitalize; }
.recurring-event-count { min-width: 2.2rem; padding: .3rem .55rem; border-radius: 999px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface)); font-size: .72rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.recurring-event-occurrences { display: grid; gap: .45rem; padding: .75rem; border-top: 1px solid var(--app-border); }
.recurring-event-occurrence { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .65rem; padding: .65rem .7rem; border-radius: 9px; color: var(--app-text); background: var(--app-surface-solid); text-decoration: none; }
.recurring-event-occurrence:hover { color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface-solid)); }
.recurring-event-occurrence > span:first-child { display: grid; gap: .12rem; min-width: 0; }
.recurring-event-occurrence strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.recurring-event-occurrence small, .recurring-event-more, .recurring-event-exceptions { margin: 0; color: var(--app-text-muted); font-size: .65rem; }
.recurring-event-exception { padding: .22rem .45rem; border-radius: 999px; color: #b56b12; background: color-mix(in srgb, #e69a38 14%, var(--app-surface)); font-size: .6rem; font-weight: 750; }
.recurring-event-more, .recurring-event-exceptions { padding: .35rem .2rem; }
.vertex-tags-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem 0; cursor: pointer; list-style: none; }
.vertex-tags-disclosure > summary::-webkit-details-marker { display: none; }
.vertex-tags-disclosure > summary::after { content: '›'; flex: 0 0 auto; color: var(--app-text-muted); font-size: 1.35rem; line-height: 1; transform: rotate(90deg); transition: transform .18s ease; }
.vertex-tags-disclosure[open] > summary::after { transform: rotate(270deg); }
.vertex-tags-disclosure > summary:focus-visible { border-radius: 8px; outline: 3px solid color-mix(in srgb, var(--app-primary) 35%, transparent); outline-offset: 5px; }
.vertex-tags-disclosure > summary > span:first-child { display: grid; gap: .2rem; min-width: 0; }
.vertex-tags-disclosure > summary strong { color: var(--app-text); font-size: 1.25rem; }
.vertex-tags-disclosure > summary small { color: var(--app-text-muted); font-size: .78rem; font-weight: 400; }
.vertex-tags-count { min-width: 2.25rem; margin-left: auto; padding: .3rem .65rem; border-radius: 999px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface)); font-size: .78rem; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.vertex-editor-tags { display: grid; gap: .65rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--app-border); }
.vertex-editor-detail-row { display: grid; grid-template-columns: minmax(9rem, .35fr) minmax(0, 1fr) 2.25rem; align-items: center; gap: .25rem .8rem; }
.vertex-editor-detail-row label { color: var(--app-text-muted); font-size: .75rem; font-weight: 700; }
.vertex-editor-detail-row small { grid-column: 2; color: var(--app-text-muted); font-size: .65rem; }
.vertex-editor-new-detail { grid-template-columns: minmax(9rem, .35fr) minmax(0, 1fr) minmax(8rem, .25fr) 2.25rem; }
.remove-vertex-detail { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, #e45e6d 40%, var(--app-border)); border-radius: 9px; color: #e45e6d; background: color-mix(in srgb, #e45e6d 8%, var(--app-surface-muted)); font-size: 1.15rem; line-height: 1; }
.remove-vertex-detail:hover { color: #fff; background: #d94d5d; }
.vertex-editor-save { position: sticky; z-index: 5; bottom: 0; justify-content: flex-end; padding: 1rem; border: 1px solid var(--app-border); border-radius: 14px; background: color-mix(in srgb, var(--app-surface-solid) 92%, transparent); backdrop-filter: blur(12px); }
.vertex-editor-form .form-control, .vertex-editor-form .form-select { color: var(--app-text) !important; background-color: var(--app-surface-muted) !important; border-color: var(--app-border) !important; -webkit-text-fill-color: var(--app-text); caret-color: var(--app-text); }
.vertex-editor-form .form-control::placeholder { color: var(--app-text-muted); opacity: .8; -webkit-text-fill-color: var(--app-text-muted); }
.vertex-editor-form .form-control[readonly] { color: var(--app-text-muted) !important; -webkit-text-fill-color: var(--app-text-muted); }
.vertex-editor-form .form-control:focus, .vertex-editor-form .form-select:focus { border-color: var(--app-primary) !important; box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary) 25%, transparent); }
.vertex-editor-form input[type="date"] { color-scheme: light; }
body.theme-dark .vertex-editor-form .form-control,
body.theme-dark .vertex-editor-form .form-select { color: #f4f6ff !important; background-color: #222c44 !important; border-color: #3a4662 !important; -webkit-text-fill-color: #f4f6ff !important; }
body.theme-dark .vertex-editor-form .form-control::placeholder { color: #aeb8d0 !important; -webkit-text-fill-color: #aeb8d0 !important; opacity: 1; }
body.theme-dark .vertex-editor-form input[type="date"] { color-scheme: dark; }
.vertex-scan-form { margin-top: 1rem; }
.vertex-scan-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.vertex-scan-mode { display: grid; grid-template-columns: auto 2.5rem 1fr; align-items: center; gap: .65rem; min-width: 0; padding: 1rem; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface-muted); cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.vertex-scan-mode:hover { transform: translateY(-1px); border-color: var(--app-primary); }
.vertex-scan-mode:has(input:checked) { border-color: var(--app-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary) 18%, transparent); }
.vertex-scan-mode input { accent-color: var(--app-primary); }
.vertex-scan-mode strong, .vertex-scan-mode small { display: block; }
.vertex-scan-mode strong { color: var(--app-text); font-size: .82rem; }
.vertex-scan-mode small { margin-top: .25rem; color: var(--app-text-muted); font-size: .68rem; line-height: 1.45; }
.vertex-scan-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface)); }
.vertex-detail-destination { display: flex; align-items: center; gap: .7rem; margin: -.15rem 0 1rem; padding: .7rem .8rem; border: 1px solid var(--app-border); border-radius: 11px; background: color-mix(in srgb, var(--app-primary) 4%, var(--app-surface)); cursor: pointer; }
.vertex-detail-destination > input { position: absolute; opacity: 0; pointer-events: none; }.vertex-toggle-track { display: flex; width: 34px; height: 20px; flex: 0 0 auto; align-items: center; padding: 2px; border-radius: 999px; background: var(--app-border); transition: background .18s; }.vertex-toggle-track span { width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: transform .18s; }.vertex-detail-destination > input:checked + .vertex-toggle-track { background: var(--app-primary); }.vertex-detail-destination > input:checked + .vertex-toggle-track span { transform: translateX(14px); }
.vertex-detail-destination strong, .vertex-detail-destination small { display: block; }.vertex-detail-destination strong { font-size: .76rem; }.vertex-detail-destination small { margin-top: .12rem; color: var(--app-text-muted); font-size: .65rem; }.vertex-detail-destination.disabled { opacity: .45; cursor: not-allowed; }
.vertex-scan-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; }
.vertex-scan-upload .file-input-wrap { width: 100%; min-width: 0; }
.preview-node-identity { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; padding: .75rem; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface-muted); }
.preview-node-identity div { display: grid; gap: .12rem; min-width: 0; }
.preview-node-identity small { color: var(--app-text-muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.preview-node-identity strong { overflow-wrap: anywhere; color: var(--app-text); font-size: .82rem; text-transform: capitalize; }
@media (max-width: 700px) { .vertex-scan-modes { grid-template-columns: 1fr; } .vertex-scan-upload { grid-template-columns: 1fr; } }
.vertex-modal-content { height: min(900px, calc(100dvh - 2rem)); max-height: calc(100dvh - 2rem); overflow: hidden; border: 1px solid var(--app-border); border-radius: 20px; color: var(--app-text); background: var(--app-surface-solid); }
.vertex-modal-content > form { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.vertex-modal-content .modal-header, .vertex-modal-content .modal-footer { border-color: var(--app-border); }
.vertex-modal-content .modal-header, .vertex-modal-content .modal-footer { flex: 0 0 auto; }
.vertex-modal-content .modal-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: scroll; overscroll-behavior: contain; scrollbar-gutter: stable; }
.vertex-modal-content .modal-body::-webkit-scrollbar { width: 10px; }
.vertex-modal-content .modal-body::-webkit-scrollbar-track { background: transparent; }
.vertex-modal-content .modal-body::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--app-text-muted) 55%, transparent); background-clip: padding-box; }
.vertex-modal-content .modal-title { margin: .2rem 0 0; font-size: 1.35rem; }
.vertex-heading-actions { display: flex; align-items: center; gap: .75rem; }
.vertex-heading-actions form { margin: 0; }
.vertex-delete-button { min-height: 46px; display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1rem; border: 1px solid color-mix(in srgb, var(--app-danger) 55%, var(--app-border)); border-radius: 12px; color: var(--app-danger); background: color-mix(in srgb, var(--app-danger) 7%, var(--app-surface-solid)); font-weight: 700; }
.vertex-delete-button svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vertex-delete-button:hover, .vertex-delete-button:focus-visible { color: #fff; border-color: var(--app-danger); background: var(--app-danger); }
.vertex-question-modal { overflow: hidden; border: 1px solid var(--app-border); border-radius: 24px; color: var(--app-text); background: var(--app-surface-solid); }
.vertex-question-modal .modal-header, .vertex-question-modal .modal-footer { padding: 1.25rem 1.5rem; border-color: var(--app-border); }
.vertex-question-close { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 12px; color: var(--app-text-muted); background: transparent; }
.vertex-question-close svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.vertex-question-close:hover { border-color: var(--app-border); color: var(--app-text); background: var(--app-surface-muted); }
.vertex-question-close:focus-visible { outline: 3px solid color-mix(in srgb, var(--app-primary) 45%, transparent); outline-offset: 2px; color: var(--app-text); }
.vertex-question-modal .modal-body { padding: 1.5rem; }
.vertex-question-modal textarea { margin-bottom: 1rem; resize: vertical; color: var(--app-text) !important; background: var(--app-surface-muted) !important; caret-color: var(--app-text); -webkit-text-fill-color: var(--app-text); }
.vertex-question-modal textarea::placeholder { color: var(--app-text-muted) !important; opacity: 1; -webkit-text-fill-color: var(--app-text-muted); }
.vertex-question-modal textarea:focus { color: var(--app-text) !important; background: var(--app-surface-muted) !important; -webkit-text-fill-color: var(--app-text); }
.vertex-question-conversation { display: grid; gap: 1rem; margin-bottom: 1rem; }
.vertex-question-exchange { padding: 1rem 1.1rem; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-surface-soft); }
.vertex-question-exchange h3 { margin: 0 0 .6rem; font-size: 1rem; color: var(--app-accent); }
.vertex-question-exchange p { margin: 0; white-space: pre-wrap; }
.vertex-note-list { display: grid; gap: 1rem; }
.vertex-note-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 1.15rem; border: 1px solid var(--app-border); border-radius: 18px; background: var(--app-surface-soft); }
.vertex-note-card h3 { margin: .35rem 0 .65rem; font-size: 1.05rem; }
.vertex-note-markdown { color: var(--app-text-muted); line-height: 1.6; }
.vertex-note-markdown > :last-child { margin-bottom: 0; }
.vertex-note-markdown h1, .vertex-note-markdown h2, .vertex-note-markdown h3, .vertex-note-markdown h4 { margin: 1rem 0 .45rem; color: var(--app-text); font-size: 1rem; letter-spacing: -.015em; }
.vertex-note-markdown ul, .vertex-note-markdown ol { margin: .5rem 0 1rem; padding-left: 1.4rem; }
.vertex-note-markdown li + li { margin-top: .25rem; }
.vertex-note-markdown code { padding: .12rem .3rem; border-radius: 5px; color: var(--app-text); background: var(--app-surface-solid); }
.vertex-note-markdown pre { overflow-x: auto; padding: .8rem; border-radius: 10px; background: var(--app-surface-solid); }
.vertex-note-markdown pre code { padding: 0; background: transparent; }
.vertex-note-markdown blockquote { margin: .75rem 0; padding-left: .8rem; border-left: 3px solid var(--app-primary); }
.vertex-note-card small { color: var(--app-text-muted); }
.vertex-field-label { display: block; margin-bottom: .4rem; color: var(--app-text-muted); font-size: .72rem; font-weight: 650; }
.vertex-modal-content input[readonly] { color: var(--app-text-muted); background: var(--app-surface-muted); }
.vertex-modal-content #vertexModalName, .vertex-modal-content .vertex-detail-input { color: var(--app-text) !important; background: var(--app-surface-muted) !important; -webkit-text-fill-color: var(--app-text); caret-color: var(--app-text); }
.vertex-modal-content #vertexModalName:focus, .vertex-modal-content .vertex-detail-input:focus { border-color: var(--app-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary) 24%, transparent); }
.vertex-modal-details { display: grid; gap: 0; margin: 1.25rem 0 0; }
.vertex-modal-details > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--app-border); }
.vertex-modal-details dt { color: var(--app-text-muted); font-size: .72rem; font-weight: 600; }
.vertex-modal-details dd { margin: 0; overflow-wrap: anywhere; font-size: .78rem; font-weight: 650; text-align: right; }
.vertex-modal-note { margin: 1rem 0 0; color: var(--app-text-muted); font-size: .75rem; }
.vertex-related-details { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--app-border); }
.vertex-related-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.vertex-related-heading small { color: var(--app-text-muted); font-size: .66rem; }
#vertexDetailFields { display: grid; gap: .8rem; }
.vertex-detail-field label { display: block; margin-bottom: .3rem; color: var(--app-text-muted); font-size: .72rem; font-weight: 650; }
.vertex-detail-field small { display: block; margin-top: .25rem; color: var(--app-text-muted); font-size: .62rem; }
.search-file-preview { overflow: hidden; margin-bottom: 1.25rem; border: 1px solid var(--app-border); border-radius: 14px; background: #101522; }
.search-file-preview img, .search-file-preview iframe { width: 100%; max-height: 320px; border: 0; object-fit: contain; }
.search-file-preview iframe { height: 320px; background: white; }
.search-file-detail-value { padding: .65rem .75rem; border: 1px solid var(--app-border); border-radius: 9px; color: var(--app-text); background: var(--app-surface-muted); overflow-wrap: anywhere; }
.search-file-details-link { width: 100%; margin-top: 1rem; font-size: .76rem; font-weight: 700; }
.stat-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* File library */
.library-count { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.8rem 1rem; border: 1px solid var(--app-border); border-radius: 15px; background: var(--app-surface); }
.library-count strong { font-size: 1.4rem; }
.library-count span { color: var(--app-text-muted); font-size: 0.82rem; }
.upload-panel { display: grid; grid-template-columns: minmax(250px, .55fr) minmax(0, 1.45fr); align-items: center; gap: 2rem; margin-bottom: 3.2rem; padding: 1.2rem 1.3rem; border: 1px solid color-mix(in srgb, var(--app-primary) 22%, var(--app-border)); border-radius: 20px; background: linear-gradient(110deg, color-mix(in srgb, var(--app-primary) 8%, var(--app-surface-solid)), var(--app-surface)); box-shadow: var(--app-shadow); }
.upload-copy { display: flex; align-items: center; gap: 0.9rem; }
.upload-copy > div { min-width: 0; display: flex; flex-direction: column; }
.upload-copy span:not(.upload-icon) { color: var(--app-text-muted); font-size: 0.82rem; }
.upload-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: white; background: var(--app-primary); font-size: 1.35rem; }
.upload-form { display: grid; grid-template-columns: minmax(250px, 1fr) auto max-content; align-items: stretch; gap: 0.65rem; min-width: 0; }
.upload-form > .app-button { min-width: 120px; align-self: stretch; white-space: nowrap; }
.file-input-wrap { position: relative; min-width: 0; }
.upload-kind-wrap { min-width: 155px; }
.upload-intent-picker { display: flex; overflow: hidden; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface-solid); }
.upload-intent-picker label { position: relative; display: flex; min-height: 46px; flex: 1 1 0; align-items: center; justify-content: center; padding: .45rem .7rem; border-right: 1px solid var(--app-border); cursor: pointer; }
.upload-intent-picker label:last-child { border-right: 0; }
.upload-intent-picker label:has(input:checked) { color: #fff; background: var(--app-primary); }
.upload-intent-picker input { position: absolute; opacity: 0; pointer-events: none; }
.upload-intent-picker span, .upload-intent-picker strong, .upload-intent-picker small { display: block; }
.upload-intent-picker strong { font-size: .72rem; white-space: nowrap; }
.upload-intent-picker small { margin-top: .05rem; color: var(--app-text-muted); font-size: .58rem; white-space: nowrap; }
.upload-intent-picker label:has(input:checked) small { color: rgba(255,255,255,.78); }
.file-input-label { display: none; }
.file-input-native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.file-picker { min-height: 46px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid var(--app-border); border-radius: 12px; color: var(--app-text); background: var(--app-surface-solid); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease; }
.file-picker:hover { border-color: color-mix(in srgb, var(--app-primary) 55%, var(--app-border)); }
.file-input-native:focus-visible + .file-picker { border-color: var(--app-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary) 25%, transparent); }
.file-picker-action { align-self: stretch; display: inline-flex; align-items: center; padding: 0 .9rem; border-right: 1px solid var(--app-border); color: var(--app-text); background: var(--app-surface-muted); font-size: .82rem; font-weight: 750; white-space: nowrap; }
.file-picker-name { min-width: 0; padding: 0 .85rem; overflow: hidden; color: var(--app-text-muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.file-picker.has-file .file-picker-name { color: var(--app-text); }
.file-outcome-card { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding: 1rem 1.15rem; }
.file-outcome-card > div { flex: 1 1 auto; }
.file-outcome-card .eyebrow { margin-bottom: .2rem; }
.file-outcome-card strong { display: block; color: var(--app-text); font-size: 1rem; text-transform: capitalize; }
.file-outcome-card p { margin: .2rem 0 0; color: var(--app-text-muted); font-size: .76rem; }
.file-outcome-icon { display: grid; width: 2.6rem; height: 2.6rem; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #fff; background: var(--app-primary); font-weight: 850; }
.upload-form .form-control { min-height: 46px; padding: 0.61rem 0.8rem; border-color: var(--app-border); border-radius: 12px; color: var(--app-text-muted); background: var(--app-surface-solid); }
.upload-form .form-select { min-height: 46px; border-color: var(--app-border); border-radius: 12px; color: var(--app-text); background-color: var(--app-surface-solid); }
.files-section-heading > span { color: var(--app-text-muted); font-size: 0.85rem; }
.thumb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.thumb-grid-item { position: relative; overflow: hidden; border: 1px solid var(--app-border); border-radius: 20px; background: var(--app-surface-solid); box-shadow: 0 8px 28px rgba(31,43,77,.06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.thumb-grid-item:hover { z-index: 1; border-color: color-mix(in srgb, var(--app-primary) 30%, var(--app-border)); transform: translateY(-4px); box-shadow: var(--app-shadow-hover); }
.file-preview { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--app-surface-muted); }
.file-preview img, .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform .35s ease; }
.thumb-grid-item:hover .file-preview img { transform: scale(1.035); }
.thumb-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; color: var(--app-text-muted); background: linear-gradient(145deg, var(--app-surface-muted), color-mix(in srgb, var(--app-primary) 8%, var(--app-surface-muted))); }
.document-glyph { display: grid; width: 62px; height: 76px; place-items: center; border: 1px solid var(--app-border); border-radius: 9px 18px 9px 9px; color: var(--app-primary); background: var(--app-surface-solid); font-size: 0.7rem; font-weight: 800; box-shadow: 0 9px 24px rgba(31,43,77,.1); }
.file-type-pill { position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.3rem 0.48rem; border-radius: 8px; color: white; background: rgba(17, 24, 39, .68); backdrop-filter: blur(8px); font-size: .65rem; font-weight: 780; letter-spacing: .05em; }
.file-card-body { padding: 1rem 1rem 1.1rem; }
.thumb-name { overflow: hidden; margin-bottom: 0.5rem; color: var(--app-text); font-size: .94rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.thumb-meta { display: flex; justify-content: space-between; gap: .5rem; color: var(--app-text-muted); font-size: .74rem; }
.thumb-actions { position: absolute; top: .7rem; right: .7rem; display: flex; align-items: center; gap: .45rem; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }
.thumb-grid-item:hover .thumb-actions, .thumb-actions:focus-within { opacity: 1; transform: none; }
.thumb-actions .file-details-button { display: inline-flex; min-height: 34px; padding: .42rem .65rem; align-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 10px; color: white; background: rgba(20,25,38,.7); backdrop-filter: blur(8px); }
.thumb-actions .file-details-button:hover { color: white; background: var(--app-primary); }
.file-delete-button { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 10px; color: white; background: rgba(20,25,38,.64); backdrop-filter: blur(8px); font-size: 1.35rem; line-height: 1; }
.file-delete-button:hover { background: var(--app-danger); }
.library-selection-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
.library-selection-actions > span { color: var(--app-text-muted); font-size: .8rem; font-weight: 700; }
.file-select-control { position: absolute; z-index: 4; top: .75rem; left: .75rem; display: none; width: 34px; height: 34px; margin: 0; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 10px; color: transparent; background: rgba(20,25,38,.72); cursor: pointer; backdrop-filter: blur(8px); }
.file-select-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-select-control:has(input:checked) { color: white; border-color: var(--app-primary); background: var(--app-primary); }
.selection-mode .file-select-control { display: grid; }
.selection-mode .thumb-actions { display: none; }
.selection-mode .thumb-grid-item:has(.file-select-control input:checked) { border-color: var(--app-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 25%, transparent); }
.library-pagination { margin-top: 2rem; }
.pagination { justify-content: center; gap: .3rem; }
.page-link { border: 1px solid var(--app-border); border-radius: 10px !important; color: var(--app-text); background: var(--app-surface-solid); }
.page-item.active .page-link { border-color: var(--app-primary); background: var(--app-primary); }
.empty-state { padding: 5rem 1rem; border: 1px dashed color-mix(in srgb, var(--app-primary) 30%, var(--app-border)); border-radius: 24px; text-align: center; background: var(--app-surface); }
.empty-icon { display: grid; width: 60px; height: 60px; margin: 0 auto 1rem; place-items: center; border-radius: 18px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 10%, transparent); font-size: 2rem; }
.empty-state p { color: var(--app-text-muted); }

/* Preview experience */
.preview-dialog { max-width: min(1180px, calc(100vw - 2rem)); }
.preview-dialog .modal-content { overflow: hidden; border: 1px solid var(--app-border); border-radius: 24px; color: var(--app-text); background: var(--app-surface-solid); box-shadow: 0 30px 90px rgba(16,24,40,.28); }
#previewModal:not(.show) { display: none !important; }
.preview-dialog .modal-header { padding: 1.1rem 1.4rem; border-color: var(--app-border); }
.preview-dialog .modal-title { font-weight: 720; letter-spacing: -.025em; }
.preview-modal-body { padding: 0; }
.preview-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .7fr); min-height: 620px; }
.preview-canvas { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 1.5rem; background: #101522; }
#previewImage { display: none; max-width: 100%; max-height: 70vh; border-radius: 12px; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
#previewFrame { display: none; width: 100%; height: 70vh; border: 0; border-radius: 12px; background: white; }
.preview-loading { display: none; color: #b7c0d6; text-align: center; font-size: .88rem; }
.preview-loading .spinner-border { color: var(--app-primary); }
.preview-sidebar { overflow-y: auto; padding: 1.25rem; border-left: 1px solid var(--app-border); }
.preview-sidebar .accordion-item { overflow: hidden; margin-bottom: .75rem; border: 1px solid var(--app-border); border-radius: 14px; color: var(--app-text); background: transparent; }
.preview-sidebar .accordion-button { color: var(--app-text); background: var(--app-surface-muted); font-weight: 680; box-shadow: none; }
.preview-sidebar .accordion-button:not(.collapsed) { color: var(--app-primary); }
.preview-sidebar .accordion-button::after { filter: none; }
.preview-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.preview-tags > div { margin: 0 !important; }
.tag-chip { display: inline-block; padding: .48rem .66rem; border: 1px solid color-mix(in srgb, var(--app-primary) 22%, var(--app-border)); border-radius: 999px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 9%, transparent); font-size: .76rem; font-weight: 650; white-space: normal; }
.document-details { display: grid; gap: .65rem; margin: 0; }
.document-details > div { display: grid; grid-template-columns: minmax(95px, .7fr) 1.3fr; gap: .75rem; padding-bottom: .65rem; border-bottom: 1px solid var(--app-border); }
.document-details > div:last-child { padding-bottom: 0; border-bottom: 0; }
.document-details dt { color: var(--app-text-muted); font-size: .75rem; font-weight: 600; }
.document-details dd { margin: 0; overflow-wrap: anywhere; color: var(--app-text); font-size: .8rem; font-weight: 680; }
.preview-details-edit { width: 100%; margin-top: 1rem; font-size: .78rem; font-weight: 700; }
.document-links { display: grid; gap: .65rem; }
.document-link { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; padding: .65rem; border: 1px solid var(--app-border); border-radius: 11px; color: inherit; background: var(--app-surface-muted); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.document-link:hover { color: inherit; border-color: var(--app-primary); transform: translateY(-1px); }
.document-link-type { min-width: 3.4rem; padding: .3rem .45rem; border-radius: 7px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 10%, transparent); font-size: .62rem; font-weight: 750; text-align: center; text-transform: uppercase; }
.document-link-type.person { color: #7542dd; background: color-mix(in srgb, #8b5cf6 12%, transparent); }
.document-link-type.day { color: #2874ae; background: color-mix(in srgb, #3b82c4 12%, transparent); }
.document-link-type.object { color: #c13c91; background: color-mix(in srgb, #d455a8 12%, transparent); }
.document-link > div { min-width: 0; }
.document-link strong, .document-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-link strong { color: var(--app-text); font-size: .8rem; }
.document-link small { margin-top: .15rem; color: var(--app-text-muted); font-size: .68rem; }

body.theme-dark .form-control,
body.theme-dark .modal-content,
body.theme-dark .accordion-button { color: var(--app-text); }
body.theme-dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

@media (max-width: 1199.98px) {
  .upload-panel { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 991.98px) {
  .thumb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .upload-panel { display: flex; align-items: stretch; flex-direction: column; }
  .upload-form { width: 100%; }
  .file-input-wrap { flex: 1; min-width: 0; }
  .preview-layout { grid-template-columns: 1fr; }
  .preview-sidebar { border-top: 1px solid var(--app-border); border-left: 0; }
  .preview-canvas { min-height: 420px; }
}

@media (max-width: 767.98px) {
  .top-nav-inner { min-height: 66px; padding: .55rem 1rem; }
  .nav-left { flex: 1 1 auto; }
  .nav-brand { margin-right: 0; }
  .nav-toggle-label { order: 2; }
  .nav-links { position: absolute; top: 66px; right: 1rem; left: 1rem; z-index: 20; margin: 0; padding: .65rem; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-surface-solid); box-shadow: var(--app-shadow-hover); }
  .nav-right { margin: 0 0 0 auto; }
  .nav-username { display: none; }
  .page-content { padding: 2.5rem 1rem 4rem; }
  .dashboard-heading, .library-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .dashboard-heading h1, .library-heading h1 { font-size: 2.6rem; }
  .hero-panel, .dashboard-grid, .landing-principles { grid-template-columns: 1fr; }
  .landing-use-case-grid { grid-template-columns: 1fr; }
  .landing-cta { align-items: flex-start; flex-direction: column; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .edge-stat-list { grid-template-columns: 1fr; }
  .thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .thumb-actions { opacity: 1; transform: none; }
  .upload-form { grid-template-columns: 1fr; }
  .upload-form > .app-button { width: 100%; }
  .preview-dialog { max-width: calc(100vw - 1rem); margin: .5rem; }
  .preview-canvas { min-height: 330px; padding: .75rem; }
}

@media (max-width: 420px) {
  .thumb-grid { grid-template-columns: 1fr; }
  .search-form { grid-template-columns: 1fr; }
  .stat-grid { gap: .7rem; }
  .stat-card { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Knowledge graph */
.graph-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.graph-page-heading > div { max-width: 760px; }
.graph-page-heading h1 { margin-bottom: .7rem; }
.graph-page-heading p { margin: 0; color: var(--app-text-muted); font-size: 1.05rem; }
.graph-library-link { padding: .7rem 1rem; border: 1px solid var(--app-border); border-radius: 12px; color: var(--app-text); background: var(--app-surface); font-weight: 650; }
.graph-library-link:hover { color: var(--app-primary); border-color: color-mix(in srgb, var(--app-primary) 35%, var(--app-border)); }
.graph-heading-actions { display: flex; align-items: center; gap: .7rem; }
.graph-mode-button { border: 1px solid var(--app-border); color: var(--app-text-muted); background: var(--app-surface-solid); }
.graph-mode-button.active { border-color: var(--app-primary); color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 9%, var(--app-surface)); }
.create-object-heading { max-width: 62rem; }
.create-object-card { max-width: 62rem; }
.create-object-form { display: grid; gap: 1rem; margin-top: 1.1rem; }
.create-object-form .form-control { color: var(--app-text); background: var(--app-surface-muted); border-color: var(--app-border); -webkit-text-fill-color: var(--app-text); }
.create-object-form .form-select { color: var(--app-text); background-color: var(--app-surface-muted); border-color: var(--app-border); }
.create-object-form .form-control::placeholder { color: var(--app-text-muted); -webkit-text-fill-color: var(--app-text-muted); opacity: .8; }
.template-fields-heading { margin-top: .75rem; padding-top: 1.1rem; border-top: 1px solid var(--app-border); }
.template-fields-heading h3, .template-fields-heading p { margin: 0; }
.template-fields-heading p { color: var(--app-text-muted); }
.template-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.template-field-wide { grid-column: 1 / -1; }
.person-token-picker { position: relative; }
.person-token-input { display: flex; min-height: 46px; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .45rem .55rem; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface-muted); transition: border-color .16s ease, box-shadow .16s ease; }
.person-token-input:focus-within { border-color: var(--app-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary) 22%, transparent); }
.person-token-list { display: contents; }
.person-token { display: inline-flex; max-width: 100%; align-items: center; gap: .35rem; padding: .34rem .38rem .34rem .62rem; border-radius: 9px; color: var(--app-text); background: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface)); font-size: .78rem; font-weight: 700; }
.person-token.is-linked { color: #fff; background: var(--app-primary); }
.person-token > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-token button { display: grid; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 50%; color: inherit; background: transparent; font-size: 1rem; line-height: 1; }
.person-token button:hover { background: rgba(255,255,255,.18); }
.person-token-input > input { min-width: 11rem; flex: 1 1 11rem; padding: .2rem .3rem; border: 0; outline: 0; color: var(--app-text); background: transparent; font: inherit; }
.person-token-input > input::placeholder { color: var(--app-text-muted); }
.person-token-results { position: absolute; top: calc(100% + .35rem); right: 0; left: 0; z-index: 30; overflow: hidden; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface-solid); box-shadow: var(--app-shadow-hover); }
.person-token-result { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; border: 0; border-bottom: 1px solid var(--app-border); color: var(--app-text); background: transparent; text-align: left; }
.person-token-result:last-child { border-bottom: 0; }
.person-token-result:hover, .person-token-result:focus-visible { background: var(--app-surface-muted); }
.person-token-result small { color: var(--app-text-muted); font-size: .65rem; }
.create-object-image-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; margin-top: 1rem; padding: 1.1rem; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-surface-muted); }
.create-object-step-number { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: 12px; color: #fff; background: var(--app-primary); font-weight: 850; }
.create-object-image-step h3 { margin: .15rem 0 .25rem; }
.create-object-image-step p { margin: 0 0 .8rem; color: var(--app-text-muted); font-size: .78rem; }
.create-object-actions { display: flex; justify-content: flex-end; gap: .7rem; padding-top: .5rem; }
.graph-workspace { position: relative; overflow: hidden; min-height: 720px; border: 1px solid var(--app-border); border-radius: 24px; background: var(--app-surface-solid); box-shadow: var(--app-shadow); }
.graph-toolbar { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(15rem, auto) minmax(20rem, 1fr) minmax(11rem, .65fr) auto auto; grid-template-areas: "preset focus search filters counts" "layout layout edit reset counts"; align-items: center; gap: .55rem .75rem; min-height: 68px; padding: .75rem 1rem; border-bottom: 1px solid var(--app-border); background: color-mix(in srgb, var(--app-surface-solid) 90%, transparent); }
.graph-preset-picker { display: flex; grid-area: preset; min-width: 0; align-items: center; gap: .5rem; }
.graph-preset-label { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.graph-preset-picker label { color: var(--app-text-muted); font-size: .65rem; font-weight: 750; }
.graph-preset-picker select { width: 11rem; min-height: 40px; padding-block: .25rem; font-size: .74rem; }
.graph-preset-help { position: relative; display: inline-grid; width: 1.15rem; height: 1.15rem; padding: 0; place-items: center; border: 1px solid var(--app-border); border-radius: 50%; color: var(--app-text-muted); background: var(--app-surface-muted); font-size: .65rem; font-weight: 800; cursor: help; }
.graph-preset-help::after { position: absolute; top: calc(100% + .55rem); left: 0; z-index: 20; width: max-content; max-width: min(18rem, 70vw); padding: .45rem .6rem; border: 1px solid var(--app-border); border-radius: 8px; color: var(--app-text); background: var(--app-surface-solid); box-shadow: var(--app-shadow); content: attr(data-tooltip); font-size: .7rem; font-weight: 650; line-height: 1.35; opacity: 0; pointer-events: none; transform: translateY(-.2rem); transition: opacity .14s ease, transform .14s ease; white-space: normal; }
.graph-preset-help:hover::after, .graph-preset-help:focus-visible::after { opacity: 1; transform: translateY(0); }
.graph-focus-controls { display: flex; grid-area: focus; align-items: center; gap: .4rem; min-width: 18rem; }
.graph-focus-search { position: relative; flex: 1 1 12rem; min-width: 9rem; }
.graph-focus-input-shell { display: flex; min-height: 40px; align-items: center; padding: .2rem; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface-muted); }
.graph-focus-input-shell:focus-within { border-color: var(--app-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 15%, transparent); }
.graph-focus-search .form-control { min-height: 34px; padding: .35rem .5rem; border: 0; background: transparent; box-shadow: none; font-size: .72rem; }
.graph-focus-token { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: .4rem; padding: .35rem .4rem .35rem .55rem; border-radius: 9px; color: var(--app-text); background: color-mix(in srgb, var(--app-primary) 13%, var(--app-surface-solid)); }
.graph-focus-token[hidden], .graph-focus-input-shell input[hidden] { display: none; }
.graph-focus-token strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.graph-focus-token button { display: grid; width: 1.55rem; height: 1.55rem; flex: 0 0 auto; padding: 0; place-items: center; border: 0; border-radius: 50%; color: var(--app-text-muted); background: transparent; font-size: 1rem; }
.graph-focus-token button:hover, .graph-focus-token button:focus-visible { color: var(--app-text); background: color-mix(in srgb, var(--app-primary) 12%, transparent); }
.graph-focus-controls > .form-select { flex: 0 0 8.2rem; width: 8.2rem; min-height: 40px; padding-block: .35rem; font-size: .7rem; }
.graph-focus-results { position: absolute; top: calc(100% + .35rem); right: 0; left: 0; z-index: 14; max-height: 18rem; overflow-y: auto; padding: .3rem; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-surface-solid); box-shadow: var(--app-shadow-hover); }
.graph-focus-result { display: grid; width: 100%; gap: .12rem; padding: .5rem .55rem; border: 0; border-radius: 8px; color: var(--app-text); background: transparent; text-align: left; }
.graph-focus-result:hover, .graph-focus-result:focus-visible { outline: 0; background: var(--app-surface-muted); }
.graph-focus-result strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.graph-focus-result small { color: var(--app-text-muted); font-size: .6rem; text-transform: capitalize; }
.graph-search-wrap { display: flex; grid-area: search; min-width: 0; align-items: center; max-width: 360px; padding: 0 .8rem; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface-muted); }
.graph-search-wrap > span { color: var(--app-text-muted); font-size: 1.2rem; }
.graph-search-wrap input { width: 100%; min-height: 40px; padding: .3rem .6rem; border: 0; outline: 0; color: var(--app-text); background: transparent; }
.graph-filters { display: flex; grid-area: filters; gap: .25rem; padding: .25rem; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface-muted); }
.graph-filter, .graph-tool-button { min-height: 34px; padding: .4rem .65rem; border: 0; border-radius: 8px; color: var(--app-text-muted); background: transparent; font-size: .76rem; font-weight: 680; }
.graph-filter { display: inline-flex; align-items: center; gap: .35rem; }
.graph-filter.active { color: var(--app-text); background: var(--app-surface-solid); box-shadow: 0 3px 10px rgba(31,43,77,.08); }
.graph-layout-toggle { display: flex; grid-area: layout; width: max-content; max-width: 100%; gap: .2rem; padding: .25rem; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-surface-muted); }
.graph-layout-toggle button { min-height: 32px; padding: .35rem .55rem; border: 0; border-radius: 7px; color: var(--app-text-muted); background: transparent; font-size: .68rem; font-weight: 750; }
.graph-layout-toggle button.active { color: var(--app-text); background: var(--app-surface-solid); box-shadow: 0 3px 10px rgba(31,43,77,.08); }
.graph-filter [data-filter-count] { min-width: 1.15rem; padding: .08rem .3rem; border-radius: 999px; background: color-mix(in srgb, var(--app-primary) 9%, transparent); font-size: .6rem; text-align: center; }
.graph-node.node-filtered, .graph-links line.link-filtered { display: none; }
.graph-tool-button { border: 1px solid var(--app-border); border-radius: 10px; color: var(--app-text); }
.graph-edit-toggle { grid-area: edit; }
#resetGraph { grid-area: reset; }
.graph-edit-toggle.active, .graph-edit-toggle[aria-pressed="true"] { color: #fff; border-color: var(--app-primary); background: var(--app-primary); }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.legend-dot.file { background: var(--app-primary); }
.legend-dot.tag { background: var(--app-accent); }
.legend-dot.detail { background: #e09338; }
.legend-dot.object { background: #d455a8; }
.legend-dot.day { background: #3b82c4; }
.graph-counts { grid-area: counts; justify-self: end; color: var(--app-text-muted); font-size: .76rem; white-space: nowrap; }
.graph-counts strong { color: var(--app-text); }
.graph-counts span::after { content: "·"; margin: 0 .3rem; }
.graph-counts small { display: block; max-width: 18rem; color: var(--app-warning, #d48b20); font-size: .6rem; white-space: normal; }
.graph-counts .family-graph-status { color: var(--app-text-muted); }
.graph-counts .family-graph-status.has-review { color: var(--app-warning, #d48b20); }
.graph-stage-wrap { position: relative; height: 650px; overflow: hidden; background: radial-gradient(circle at center, color-mix(in srgb, var(--app-primary) 5%, var(--app-surface-solid)), var(--app-surface-solid) 68%); }
.graph-stage-wrap::before { content: ""; position: absolute; inset: 0; opacity: .4; pointer-events: none; background-image: radial-gradient(var(--app-border) 1px, transparent 1px); background-size: 22px 22px; }
#graphCanvas { position: relative; z-index: 1; width: 100%; height: 100%; cursor: grab; }
#graphCanvas:active { cursor: grabbing; }
.graph-state { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; color: var(--app-text-muted); text-align: center; background: var(--app-surface-solid); }
.graph-state[hidden] { display: none; }
.graph-state strong { color: var(--app-text); font-size: 1.1rem; }
.graph-state .app-button { margin-top: .8rem; }
.graph-loader { width: 42px; height: 42px; margin-bottom: .6rem; border: 3px solid color-mix(in srgb, var(--app-primary) 15%, transparent); border-top-color: var(--app-primary); border-radius: 50%; animation: graph-spin .8s linear infinite; }
@keyframes graph-spin { to { transform: rotate(360deg); } }
.empty-icon.error { color: var(--app-danger); background: color-mix(in srgb, var(--app-danger) 10%, transparent); }
.graph-hint { position: absolute; z-index: 2; bottom: .8rem; left: .9rem; padding: .4rem .6rem; border: 1px solid var(--app-border); border-radius: 9px; color: var(--app-text-muted); background: color-mix(in srgb, var(--app-surface-solid) 85%, transparent); backdrop-filter: blur(8px); font-size: .67rem; pointer-events: none; }
.graph-links line { stroke: color-mix(in srgb, var(--app-text-muted) 30%, transparent); stroke-width: 1.2; transition: opacity .2s, stroke .2s, stroke-width .2s; }
.graph-links line.timeline-link { stroke-dasharray: 4 4; }
.graph-links line.family-structural-link { opacity: 0; pointer-events: none; }
.graph-links line.family-extra-link { opacity: 0; pointer-events: none; stroke-dasharray: 4 5; }
.graph-links line.family-extra-link.visible { opacity: .42; pointer-events: auto; }
.graph-links line.family-auxiliary-link { opacity: .58; stroke: color-mix(in srgb, var(--app-primary) 48%, var(--app-text-muted)); stroke-width: 1.45; stroke-dasharray: 7 5; }
.graph-links line.family-review-link { opacity: .75; stroke: var(--app-warning, #d48b20); stroke-width: 1.7; stroke-dasharray: 3 4; }
.graph-links line.family-partner-link { stroke: color-mix(in srgb, var(--app-primary) 58%, var(--app-text-muted)); stroke-width: 2; }
.graph-links path.family-pedigree-connector { fill: none; stroke: color-mix(in srgb, var(--app-text-muted) 55%, transparent); stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.family-compass-guide { pointer-events: none; color: color-mix(in srgb, var(--app-primary) 30%, var(--app-border)); }
.family-compass-guide circle { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 10; opacity: .22; }
.family-compass-guide line { stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 14; opacity: .16; }
.family-compass-guide text { fill: color-mix(in srgb, var(--app-text-muted) 68%, transparent); font-size: 11px; font-weight: 800; text-anchor: middle; letter-spacing: .12em; }
.graph-links line.day-order-link { stroke: #3b82c4; stroke-width: 2; stroke-dasharray: 7 3; }
.graph-links line.link-highlighted { stroke: var(--app-primary); stroke-width: 2.3; }
.graph-links line.link-muted { opacity: .12; }
.graph-node { cursor: pointer; outline: none; transition: opacity .2s; }
.graph-node circle { stroke: var(--app-surface-solid); stroke-width: 3; filter: drop-shadow(0 5px 8px rgba(31,43,77,.18)); transition: r .2s, stroke .2s, opacity .2s; }
.graph-node.node-file circle { fill: var(--app-primary); }
.graph-node.node-tag circle { fill: var(--app-accent); }
.graph-node.node-detail circle { fill: #e09338; }
.graph-node.node-object circle { fill: #d455a8; }
.graph-node.node-day circle { fill: #3b82c4; }
.graph-node.node-tag:has(.node-label) circle { opacity: .9; }
.graph-node .node-label { fill: var(--app-text); font-size: 10px; font-weight: 620; text-anchor: middle; paint-order: stroke; stroke: var(--app-surface-solid); stroke-width: 3px; stroke-linejoin: round; }
.graph-node .node-context-label { fill: var(--app-text-muted); font-size: 8px; font-weight: 620; text-anchor: middle; paint-order: stroke; stroke: var(--app-surface-solid); stroke-width: 3px; stroke-linejoin: round; }
.graph-node .node-icon { fill: white; font-size: 10px; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.graph-node:hover circle, .graph-node:focus circle, .graph-node.node-selected circle { stroke: color-mix(in srgb, var(--app-primary) 40%, white); stroke-width: 5; }
.graph-node.node-unrelated, .graph-node.node-muted { opacity: .12; }
.timeline-heading { display: flex; justify-content: space-between; margin-bottom: 1.5rem; }
.timeline-heading h1 { margin: .2rem 0 .5rem; }
.timeline-heading p { margin: 0; color: var(--app-text-muted); }
.timeline-day-picker { display: grid; grid-template-columns: 48px minmax(240px, 520px) 48px; justify-content: center; align-items: stretch; gap: .8rem; margin-bottom: 2rem; }
.timeline-nav-button { display: grid; place-items: center; border: 1px solid var(--app-border); border-radius: 14px; color: var(--app-text); background: var(--app-surface); font-size: 1.35rem; text-decoration: none; }
.timeline-nav-button:hover { color: var(--app-primary); border-color: var(--app-primary); }
.timeline-nav-button.disabled { opacity: .35; }
.timeline-date-form { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; padding: .85rem 1rem; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface); }
.timeline-date-form label { color: var(--app-text-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.timeline-date-form select { grid-row: 1 / 3; grid-column: 2; min-width: 150px; padding: .5rem; border: 1px solid var(--app-border); border-radius: 9px; color: var(--app-text); background: var(--app-surface-muted); }
.timeline-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .75rem; padding-bottom: 1rem; }
.timeline-week-day { min-height: 360px; padding: .65rem; border: 1px solid var(--app-border); border-radius: 18px; background: color-mix(in srgb, var(--app-surface) 88%, var(--app-surface-muted)); }
.timeline-week-day.is-today { border-color: color-mix(in srgb, var(--app-primary) 65%, var(--app-border)); box-shadow: inset 0 3px 0 var(--app-primary); }
.timeline-week-day > header { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: .25rem .25rem .75rem; border-bottom: 1px solid var(--app-border); }
.timeline-week-day > header span { color: var(--app-text-muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.timeline-week-day > header strong { grid-row: 1 / 3; grid-column: 2; color: var(--app-text); font-size: 1.55rem; line-height: 1; }
.timeline-week-day > header small { color: var(--app-text-muted); font-size: .68rem; }
.timeline-day-cards { display: grid; align-content: start; gap: .65rem; padding-top: .65rem; }
.timeline-day-empty { margin: .75rem .2rem; color: var(--app-text-muted); font-size: .72rem; text-align: center; }
.timeline-index-card { overflow: hidden; border: 1px solid var(--app-border); border-radius: 18px; color: var(--app-text); background: var(--app-surface); box-shadow: var(--app-shadow); text-decoration: none; transition: transform .18s, border-color .18s; }
.timeline-index-card:hover { color: var(--app-text); border-color: color-mix(in srgb, var(--app-primary) 45%, var(--app-border)); transform: translateY(-3px); }
.timeline-card-preview { display: grid; height: 92px; place-items: center; overflow: hidden; color: var(--app-primary); background: var(--app-surface-muted); font-size: 3rem; }
.timeline-card-preview img { width: 100%; height: 100%; object-fit: cover; }
.timeline-card-copy { padding: .75rem .8rem .85rem; }
.timeline-card-type { color: var(--app-primary); font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.timeline-card-copy h2 { margin: .2rem 0 .55rem; font-size: .95rem; line-height: 1.25; }
.timeline-card-copy dl { display: grid; gap: .35rem; margin: 0; }
.timeline-card-copy dl div { display: grid; gap: .1rem; font-size: .68rem; }
.timeline-card-copy dt { color: var(--app-text-muted); }.timeline-card-copy dd { margin: 0; overflow-wrap: anywhere; }
.timeline-empty { padding: 4rem 1rem; border: 1px dashed var(--app-border); border-radius: 18px; color: var(--app-text-muted); text-align: center; background: var(--app-surface); }
.timeline-empty strong { display: block; margin-bottom: .35rem; color: var(--app-text); font-size: 1.1rem; }
.on-this-day { margin-top: 1.5rem; padding: 1.3rem; }
.on-this-day-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.on-this-day-heading h2 { margin: .2rem 0 0; font-size: 1.45rem; }.on-this-day-heading a { color: var(--app-primary); font-size: .78rem; font-weight: 700; text-decoration: none; }
.on-this-day-title { display: grid; gap: .35rem; }
.on-this-day-date-navigation { display: flex; align-items: center; gap: .45rem; }
.on-this-day-nav { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border: 1px solid var(--app-border); border-radius: 9px; background: var(--app-surface-muted); font-size: 1rem !important; }
.on-this-day-nav:hover, .on-this-day-nav:focus-visible { border-color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 9%, var(--app-surface)); }
.on-this-day-today { padding: .45rem .65rem; }
.on-this-day-picker { position: relative; }
.on-this-day-picker > summary { display: flex; align-items: center; min-width: 12.5rem; padding: .38rem .7rem; cursor: pointer; list-style: none; border: 1px solid transparent; border-radius: 9px; color: var(--app-text); line-height: 1.2; }
.on-this-day-picker > summary h2 { margin: 0; }
.on-this-day-picker > summary::-webkit-details-marker { display: none; }
.on-this-day-picker > summary:hover, .on-this-day-picker > summary:focus-visible, .on-this-day-picker[open] > summary { border-color: var(--app-border); background: var(--app-surface-muted); }
.on-this-day-picker > summary span { margin-left: .25rem; color: var(--app-text-muted); font-size: .85rem; }
.on-this-day-picker-panel { position: absolute; z-index: 20; top: calc(100% + .55rem); left: 0; width: min(19rem, calc(100vw - 2rem)); padding: 1rem; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface-solid); box-shadow: var(--app-shadow); }
.on-this-day-picker-heading { display: grid; gap: .15rem; margin-bottom: .75rem; }
.on-this-day-picker-heading strong { font-size: .9rem; }.on-this-day-picker-heading small { color: var(--app-text-muted); font-size: .67rem; }
.on-this-day-picker-panel > label { display: block; margin-bottom: .3rem; color: var(--app-text-muted); font-size: .68rem; font-weight: 700; }
.on-this-day-weekdays, .on-this-day-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.on-this-day-weekdays { margin-top: .75rem; color: var(--app-text-muted); font-size: .62rem; text-align: center; }
.on-this-day-days { margin-top: .35rem; }
.on-this-day-days button { aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: 8px; color: var(--app-text); background: transparent; font-size: .72rem; }
.on-this-day-days button:hover, .on-this-day-days button:focus-visible { border-color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 9%, var(--app-surface)); }
.on-this-day-days button.is-selected { color: white; background: var(--app-primary); font-weight: 800; }
.on-this-day-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: .8rem; }
.on-this-day-card { display: grid; grid-template-columns: 64px 1fr; min-height: 72px; overflow: hidden; border: 1px solid var(--app-border); border-radius: 13px; color: var(--app-text); background: var(--app-surface-muted); text-decoration: none; }
.on-this-day-card:hover { color: var(--app-text); border-color: var(--app-primary); }.on-this-day-card img { width: 64px; height: 100%; object-fit: cover; }
.on-this-day-year { display: grid; place-items: center; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface)); font-size: .8rem; font-weight: 800; }
.on-this-day-card > div { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: .65rem .75rem; }.on-this-day-card small { color: var(--app-text-muted); font-size: .63rem; text-transform: capitalize; }.on-this-day-card strong { margin: .1rem 0; }.on-this-day-card > div > span:not(.dated-event-badge) { overflow: hidden; color: var(--app-text-muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.on-this-day-card .dated-event-badge { margin-bottom: .3rem; }
.on-this-day-empty { margin: 0; padding: 1rem; border: 1px dashed var(--app-border); border-radius: 12px; color: var(--app-text-muted); text-align: center; }
.node-inspector { position: absolute; z-index: 6; top: 105px; right: 0; bottom: 0; width: min(340px, calc(100% - 2rem)); padding: 1.5rem; border-left: 1px solid var(--app-border); background: color-mix(in srgb, var(--app-surface-solid) 95%, transparent); box-shadow: -16px 0 45px rgba(31,43,77,.1); backdrop-filter: blur(18px); transform: translateX(105%); transition: transform .28s ease; }
.node-inspector.open { transform: none; }
.graph-composer-panel { position: absolute; z-index: 7; bottom: 1rem; left: 1rem; width: min(440px, calc(100% - 2rem)); padding: 1.15rem; border: 1px solid color-mix(in srgb, var(--app-primary) 35%, var(--app-border)); border-radius: 18px; background: color-mix(in srgb, var(--app-surface-solid) 96%, transparent); box-shadow: var(--app-shadow); backdrop-filter: blur(18px); }
.graph-composer-panel[hidden] { display: none; }
.graph-composer-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }.graph-composer-heading h2 { margin: .15rem 0 0; font-size: 1.05rem; }
.graph-composer-heading-actions { display: flex; gap: .35rem; }.graph-composer-heading-button { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid var(--app-border); border-radius: 10px; color: var(--app-text-muted); background: var(--app-surface-muted); font-size: 1.15rem; }
.graph-composer-heading-button:hover, .graph-composer-heading-button:focus-visible { color: var(--app-text); border-color: var(--app-primary); }
#graphComposerCollapsedSummary { display: none; margin-top: .3rem; color: var(--app-text-muted); font-size: .65rem; font-weight: 600; }.graph-composer-panel.collapsed { width: min(360px, calc(100% - 2rem)); }.graph-composer-panel.collapsed #graphComposerCollapsedSummary { display: block; }
.graph-composer-body[hidden] { display: none; }
.graph-composer-panel > p { margin: .8rem 0 0; color: var(--app-text-muted); font-size: .75rem; }
.graph-composer-panel > .graph-composer-status { min-height: 1rem; margin-top: .35rem; color: var(--app-success, #0f9f7a); font-weight: 700; }
.graph-composer-panel > .graph-composer-status.error { color: var(--app-danger); }
.graph-composer-searches { display: grid; grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); align-items: end; gap: .45rem; margin-top: .75rem; }
.graph-composer-searches > .graph-composer-search-field:first-child { grid-column: 1; }.graph-composer-searches > .graph-composer-swap { grid-column: 2; }.graph-composer-searches > .graph-composer-search-field:last-child { grid-column: 3; }
.graph-composer-search-field { position: relative; min-width: 0; }
.graph-composer-search-field > label { display: block; margin-bottom: .3rem; color: var(--app-text-muted); font-size: .66rem; font-weight: 750; }
.graph-composer-input-shell { display: flex; min-height: 48px; align-items: center; padding: .25rem; border: 1px solid var(--app-border); border-radius: 11px; background: var(--app-surface-muted); }.graph-composer-input-shell:focus-within { border-color: var(--app-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 15%, transparent); }
.graph-composer-search-field .form-control { min-height: 38px; padding: .45rem .5rem; border: 0; background: transparent; box-shadow: none; font-size: .72rem; }
.graph-composer-token { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: .4rem; padding: .35rem .4rem .35rem .55rem; border-radius: 8px; color: var(--app-text); background: color-mix(in srgb, var(--app-primary) 13%, var(--app-surface-solid)); }
.graph-composer-token[hidden], .graph-composer-input-shell input[hidden] { display: none; }
.graph-composer-token > span { display: grid; min-width: 0; }.graph-composer-token strong, .graph-composer-token small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.graph-composer-token strong { font-size: .69rem; }.graph-composer-token small { min-height: .75rem; color: var(--app-text-muted); font-size: .57rem; }
.graph-composer-token button { display: grid; width: 1.55rem; height: 1.55rem; flex: 0 0 auto; padding: 0; place-items: center; border: 0; border-radius: 50%; color: var(--app-text-muted); background: transparent; font-size: 1rem; }.graph-composer-token button:hover, .graph-composer-token button:focus-visible { color: var(--app-text); background: color-mix(in srgb, var(--app-primary) 12%, transparent); }
.graph-composer-swap { width: 2rem; height: 2rem; margin-bottom: .5rem; padding: 0; border: 1px solid var(--app-border); border-radius: 50%; color: var(--app-primary); background: var(--app-surface-solid); }
.graph-composer-results { position: absolute; top: calc(100% + .35rem); right: 0; left: 0; z-index: 12; max-height: 15rem; overflow-y: auto; padding: .3rem; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-surface-solid); box-shadow: var(--app-shadow-hover); }
.graph-composer-results.opens-upward { top: auto; bottom: calc(100% + .35rem); }
.graph-composer-result { display: grid; width: 100%; gap: .12rem; padding: .5rem .55rem; border: 0; border-radius: 8px; color: var(--app-text); background: transparent; text-align: left; }
.graph-composer-result:hover, .graph-composer-result:focus-visible { outline: 0; background: var(--app-surface-muted); }
.graph-composer-result strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.graph-composer-result small { color: var(--app-text-muted); font-size: .6rem; text-transform: capitalize; }
.graph-composer-panel form { display: grid; gap: .65rem; margin-top: .9rem; }.graph-composer-panel form > label, #composerCustomWrap label { color: var(--app-text-muted); font-size: .66rem; font-weight: 750; }
.graph-composer-existing { padding: .65rem .75rem; border: 1px solid color-mix(in srgb, var(--app-primary) 35%, var(--app-border)); border-radius: 10px; color: var(--app-text-muted); background: color-mix(in srgb, var(--app-primary) 8%, var(--app-surface)); font-size: .65rem; }
.graph-composer-existing strong { display: block; margin-bottom: .25rem; color: var(--app-text); }.graph-composer-existing ul { display: grid; gap: .2rem; margin: 0; padding-left: 1rem; }
.graph-composer-preview { min-height: 2.6rem; padding: .65rem; border-radius: 9px; color: var(--app-text-muted); background: var(--app-surface-muted); font-size: .68rem; line-height: 1.55; white-space: pre-line; }
.inspector-close { position: absolute; top: .9rem; right: .9rem; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--app-border); border-radius: 10px; color: var(--app-text-muted); background: var(--app-surface-muted); font-size: 1.25rem; }
.node-kind { display: inline-block; margin-bottom: .85rem; padding: .35rem .55rem; border-radius: 999px; color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 10%, transparent); font-size: .68rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.node-inspector h2 { padding-right: 2rem; overflow-wrap: anywhere; }
.node-inspector > p { color: var(--app-text-muted); font-size: .86rem; line-height: 1.55; }
.inspector-details { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; margin: 1.5rem 0; padding: 1rem 0; border-top: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border); font-size: .78rem; }
.inspector-details dt { color: var(--app-text-muted); font-weight: 550; }
.inspector-details dd { margin: 0; overflow-wrap: anywhere; color: var(--app-text); text-align: right; font-weight: 650; }
.inspector-connections > div { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 220px; overflow-y: auto; }
.connection-chip { padding: .4rem .55rem; border: 1px solid var(--app-border); border-radius: 9px; color: var(--app-text-muted); background: var(--app-surface-muted); font-size: .7rem; }
.connection-chip.file { color: var(--app-primary); }
.connection-chip.tag { color: var(--app-accent); }
.connection-chip.detail { color: #bd6e16; }
.connection-chip.object { color: #c13c91; }
.connection-chip.day { color: #2874ae; }
.legend-dot.person { background: #8b5cf6; }
.legend-dot.business { background: #0f9f7a; }
.graph-node.node-person circle { fill: #8b5cf6; }
.graph-node.node-business circle { fill: #0f9f7a; }
.graph-node.node-person .node-label, .graph-node.node-business .node-label { font-size: 12px; font-weight: 720; }
.connection-chip.person { color: #7542dd; }
.connection-chip.business { color: #087e60; }

/* Settings and integrations */
.settings-heading { margin-bottom: 2rem; }
.settings-heading > div { max-width: 720px; }
.settings-heading h1 { margin-bottom: .7rem; }
.settings-heading p { color: var(--app-text-muted); font-size: 1.05rem; }
.settings-workspace { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.settings-navigation { position: sticky; top: 92px; display: grid; gap: .3rem; padding: .65rem; }
.settings-navigation a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .7rem; align-items: center; padding: .75rem; border: 1px solid transparent; border-radius: 12px; color: var(--app-text); text-decoration: none; }
.settings-navigation a > span:first-child { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 9px; color: var(--app-text-muted); background: var(--app-surface-muted); font-size: .72rem; font-weight: 850; }
.settings-navigation a > span:last-child { display: grid; gap: .08rem; min-width: 0; }
.settings-navigation strong { font-size: .82rem; }
.settings-navigation small { overflow: hidden; color: var(--app-text-muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.settings-navigation a:hover { border-color: var(--app-border); background: var(--app-surface-muted); }
.settings-navigation a.active { border-color: color-mix(in srgb, var(--app-primary) 35%, var(--app-border)); color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface-solid)); }
.settings-navigation a.active > span:first-child { color: white; background: var(--app-primary); }
.settings-content { min-width: 0; }
.settings-panel-heading { margin-bottom: 1.25rem; }
.settings-panel-heading h2 { margin: .3rem 0 .45rem; font-size: clamp(1.65rem, 3vw, 2.25rem); }
.settings-panel-heading p { margin: 0; color: var(--app-text-muted); }
.settings-section { display: grid; gap: 1rem; }
.settings-section + .settings-section { margin-top: 1.5rem; }
.integration-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem; align-items: start; padding: 1.5rem; border: 1px solid var(--app-border); border-radius: 22px; background: var(--app-surface); box-shadow: var(--app-shadow); }
.integration-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: white; font-size: 1.35rem; font-weight: 800; }
.integration-icon.google { background: linear-gradient(145deg, #4285f4, #34a853); }
.integration-icon.openai { background: linear-gradient(145deg, #171b29, #695cf6); font-size: .85rem; letter-spacing: -.03em; }
.integration-copy h2, .integration-copy h3 { margin-bottom: .35rem; font-size: 1.2rem; }
.integration-copy > p { max-width: 760px; margin: 1rem 0; color: var(--app-text-muted); line-height: 1.65; }
.integration-status { display: inline-flex; align-items: center; gap: .4rem; color: var(--app-text-muted); font-size: .72rem; font-weight: 680; }
.integration-status > span { width: 7px; height: 7px; border-radius: 50%; background: #9aa3b7; }
.integration-status.connected { color: #14946e; }
.integration-status.connected > span { background: #21b888; box-shadow: 0 0 0 4px rgba(33,184,136,.12); }
.privacy-note { display: inline-block; padding: .65rem .8rem; border-radius: 10px; color: var(--app-text-muted); background: var(--app-surface-muted); font-size: .76rem; }
.settings-usage-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface-muted); }
.settings-usage-table {
  --bs-table-color: var(--app-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--app-border);
  --bs-table-striped-color: var(--app-text);
  --bs-table-striped-bg: color-mix(in srgb, var(--app-primary) 4%, transparent);
  --bs-table-hover-color: var(--app-text);
  --bs-table-hover-bg: color-mix(in srgb, var(--app-primary) 7%, transparent);
  min-width: 700px;
  margin: 0;
  color: var(--app-text);
}
.settings-usage-table th,
.settings-usage-table td { padding: .8rem 1rem; border-color: var(--app-border); color: var(--app-text); white-space: nowrap; }
.settings-usage-table th { color: var(--app-text-muted); background: color-mix(in srgb, var(--app-surface-solid) 78%, var(--app-surface-muted)); font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.settings-usage-table tbody tr:last-child td { border-bottom: 0; }
.settings-usage-table tbody tr:hover { background: color-mix(in srgb, var(--app-primary) 5%, transparent); }
.integration-actions { display: flex; align-items: center; gap: .55rem; }
.integration-secondary, body.theme-dark a.integration-secondary { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1.15rem; border: 1px solid var(--app-border); border-radius: 12px; color: var(--app-text); background: var(--app-surface-solid); font-weight: 650; text-decoration: none; }
.integration-secondary:hover, body.theme-dark a.integration-secondary:hover { color: var(--app-text); border-color: var(--app-primary); background: var(--app-surface-muted); text-decoration: none; }
.openai-card { grid-template-columns: auto minmax(0, 1fr); }
.integration-settings-form { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(210px, .55fr); gap: 1rem; max-width: 860px; margin: 1.1rem 0; }
.integration-field { display: grid; gap: .4rem; }
.integration-field label { color: var(--app-text-muted); font-size: .78rem; font-weight: 700; }
.integration-field .form-control, .integration-field .form-select { min-height: 46px; border-color: var(--app-border); border-radius: 12px; color: var(--app-text); background-color: var(--app-surface-solid); }
.integration-toggle { grid-column: 1 / -1; display: flex; gap: .65rem; align-items: center; color: var(--app-text-muted); font-size: .86rem; }
.integration-toggle input { width: 1.05rem; height: 1.05rem; accent-color: var(--app-primary); }
.integration-toggle > span { display: grid; gap: .12rem; }
.integration-toggle small { color: var(--app-text-muted); font-weight: 400; }
.integration-form-actions { grid-column: 1 / -1; display: flex; gap: .55rem; }
.saved-key-test { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.invitation-created-link { display: block; max-width: 100%; overflow-wrap: anywhere; }
.invitation-created-link a { color: var(--app-primary); }
.admin-invitation-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface-muted); }
.admin-invitation-table { width: 100%; min-width: 920px; margin: 0; border-collapse: collapse; table-layout: fixed; color: var(--app-text); font-size: .84rem; }
.invitation-email-column { width: 23%; }
.invitation-status-column { width: 12%; }
.invitation-date-column { width: 18%; }
.invitation-actions-column { width: 29%; }
.admin-invitation-table th { padding: .8rem .85rem; border-bottom: 1px solid var(--app-border); color: var(--app-text-muted); background: color-mix(in srgb, var(--app-surface-solid) 78%, var(--app-surface-muted)); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.admin-invitation-table td { padding: .8rem .85rem; border-bottom: 1px solid var(--app-border); color: var(--app-text); vertical-align: middle; overflow-wrap: anywhere; }
.admin-invitation-table tbody tr:last-child td { border-bottom: 0; }
.admin-invitation-table tbody tr:hover { background: color-mix(in srgb, var(--app-primary) 5%, transparent); }
.admin-usage-filter { display: flex; align-items: end; flex-wrap: wrap; gap: .9rem; margin: 1rem 0; }
.admin-usage-filter .integration-field { flex: 1 1 180px; max-width: 260px; }
.admin-usage-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: .8rem; margin: 1rem 0; }
.admin-usage-summary > div { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface-muted); }
.admin-usage-summary span { color: var(--app-text-muted); font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.admin-usage-summary strong { color: var(--app-text); font-size: 1.35rem; }
.admin-usage-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface-muted); }
.admin-usage-table { width: 100%; min-width: 950px; border-collapse: collapse; color: var(--app-text); font-size: .84rem; }
.admin-usage-table th { padding: .8rem; border-bottom: 1px solid var(--app-border); color: var(--app-text-muted); background: color-mix(in srgb, var(--app-surface-solid) 78%, var(--app-surface-muted)); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-align: right; text-transform: uppercase; }
.admin-usage-table th:first-child, .admin-usage-table td:first-child { text-align: left; }
.admin-usage-table td { padding: .8rem; border-bottom: 1px solid var(--app-border); text-align: right; }
.admin-usage-table tbody tr:last-child td { border-bottom: 0; }
.invitation-status { display: inline-flex; padding: .25rem .5rem; border-radius: 999px; color: var(--app-text-muted); background: var(--app-surface-solid); font-size: .67rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.invitation-status.pending { color: #2274b7; background: color-mix(in srgb, #2274b7 14%, var(--app-surface)); }.invitation-status.accepted { color: #148562; background: color-mix(in srgb, #148562 14%, var(--app-surface)); }.invitation-status.expired, .invitation-status.revoked { color: #a55f1b; background: color-mix(in srgb, #a55f1b 14%, var(--app-surface)); }
.invitation-actions-heading { text-align: right !important; }
.invitation-link-details { position: relative; flex: 0 0 auto; min-width: 0; }.invitation-link-details summary { list-style: none; cursor: pointer; }.invitation-link-details summary::-webkit-details-marker { display: none; }.invitation-link-details[open] summary { border-color: var(--app-primary); color: var(--app-primary); }
.invitation-link-panel { position: absolute; top: calc(100% + .55rem); right: 0; z-index: 12; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; width: min(32rem, calc(100vw - 4rem)); min-width: 20rem; padding: .5rem; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface-solid); box-shadow: var(--app-shadow-hover); }
.invitation-link-panel .form-control { min-width: 0; color: var(--app-text) !important; background: var(--app-surface-muted) !important; border-color: var(--app-border) !important; -webkit-text-fill-color: var(--app-text); caret-color: var(--app-text); }
.invite-copy-button { min-width: 6.5rem; min-height: 40px; padding: .55rem .8rem; white-space: nowrap; }.invitation-actions { display: flex; align-items: center; gap: .45rem; justify-content: flex-end; text-align: right; overflow: visible !important; }.invitation-actions form { display: flex; justify-content: flex-end; }
.admin-invitation-table-wrap:has(.invitation-link-details[open]) { overflow: visible; }

.app-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon-action { position: relative; display: inline-grid; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; padding: 0; place-items: center; border: 1px solid var(--app-border); border-radius: 10px; color: var(--app-text); background: var(--app-surface-solid); text-decoration: none; cursor: pointer; }
.icon-action { min-height: 44px; min-width: 44px; }
.icon-action svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.icon-action:hover, .icon-action:focus-visible { z-index: 3; color: var(--app-primary); border-color: var(--app-primary); background: var(--app-surface-muted); text-decoration: none; }
.icon-action-danger { color: var(--app-danger); border-color: color-mix(in srgb, var(--app-danger) 52%, var(--app-border)); }
.icon-action-danger:hover, .icon-action-danger:focus-visible { color: white; border-color: var(--app-danger); background: var(--app-danger); }
.icon-action::after { position: absolute; right: 50%; bottom: calc(100% + .55rem); z-index: 20; width: max-content; max-width: 13rem; padding: .4rem .55rem; border: 1px solid var(--app-border); border-radius: 7px; color: var(--app-text); background: var(--app-surface-solid); box-shadow: var(--app-shadow); content: attr(data-tooltip); font-size: .7rem; font-weight: 650; line-height: 1.25; opacity: 0; pointer-events: none; transform: translate(50%, .2rem); transition: opacity .14s ease, transform .14s ease; white-space: nowrap; }
.icon-action:hover::after, .icon-action:focus-visible::after { opacity: 1; transform: translate(50%, 0); }

@media (max-width: 767.98px) {
  .integration-card { grid-template-columns: auto 1fr; }
  .integration-actions { grid-column: 1 / -1; }
  .integration-settings-form { grid-template-columns: 1fr; }
  .integration-toggle, .integration-form-actions { grid-column: auto; }
  .admin-invitation-table { min-width: 820px; }
  .invitation-link-panel { grid-template-columns: 1fr; }
}

@media (max-width: 1500px) {
  .graph-toolbar { grid-template-columns: minmax(15rem, auto) minmax(18rem, 1fr) auto auto; grid-template-areas: "preset focus filters counts" "search layout edit reset"; }
  .graph-search-wrap { width: 100%; max-width: none; }
}

@media (max-width: 900px) {
  .graph-toolbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "preset preset" "focus focus" "search filters" "layout layout" "edit reset" "counts counts"; }
  .graph-search-wrap { max-width: none; }
  .graph-layout-toggle { width: 100%; }
  .graph-layout-toggle button { flex: 1 1 auto; }
  .graph-counts { width: 100%; justify-self: stretch; }
  .graph-stage-wrap { height: 600px; }
  .node-inspector { top: 121px; }
  .graph-composer-panel { top: calc(121px + 1rem); bottom: auto; }
  .graph-focus-controls { flex-basis: 100%; }
}

@media (max-width: 640px) {
  .graph-page-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .graph-page-heading h1 { font-size: 2.6rem; }
  .graph-heading-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .graph-library-link, .graph-heading-actions .app-button { width: 100%; }
  .graph-workspace { min-height: 740px; border-radius: 18px; }
  .graph-toolbar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "preset" "focus" "search" "filters" "layout" "edit" "reset" "counts"; align-items: stretch; }
  .graph-preset-picker { flex-wrap: wrap; }
  .graph-preset-picker select { width: 100%; }
  .graph-search-wrap { flex-basis: 100%; }
  .graph-focus-controls { min-width: 0; flex-wrap: wrap; }
  .graph-focus-search { flex-basis: 100%; }
  .graph-filters { flex: 1; }
  .graph-filter { flex: 1; justify-content: center; }
  .graph-counts { width: 100%; }
  .graph-stage-wrap { height: 610px; }
  .node-inspector { top: 173px; }
  .graph-composer-panel { top: calc(173px + 1rem); bottom: auto; }
  .graph-hint { display: none; }
  .graph-composer-searches { grid-template-columns: 1fr; }
  .graph-composer-searches > .graph-composer-search-field:first-child, .graph-composer-searches > .graph-composer-swap, .graph-composer-searches > .graph-composer-search-field:last-child { grid-column: 1; }
  .vertex-heading-avatar-wrap { width: 52px; height: 52px; flex-basis: 52px; }
}

/* Responsive application system */
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg, iframe { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
.surface-card, .detail-option-card, .integration-card, .graph-workspace { min-width: 0; }
.search-table-wrap, .admin-invitation-table-wrap, .table-responsive {
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1100px) {
  .top-nav-inner { max-width: none; }
  .page-content { padding-inline: clamp(1rem, 3vw, 1.5rem); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr); }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .thumb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900.02px) and (max-width: 1100px) {
  .graph-composer-panel { top: calc(121px + 1rem); bottom: auto; }
}

@media (max-width: 991.98px) {
  .timeline-week { grid-template-columns: repeat(7, minmax(160px, 1fr)); overflow-x: auto; }
  .top-nav-inner {
    position: relative;
    min-height: 68px;
    flex-wrap: nowrap;
    gap: .75rem;
    padding: .6rem 1rem;
  }
  .nav-left { min-width: 0; flex: 1 1 auto; }
  .nav-brand { min-width: 0; margin-right: 0; }
  .nav-toggle-label { display: flex; flex: 0 0 44px; width: 44px; height: 44px; align-items: center; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface-muted); }
  .nav-toggle-label span { width: 20px; }
  .nav-links {
    position: absolute;
    z-index: 1200;
    top: calc(100% + .4rem);
    right: 1rem;
    left: 1rem;
    display: none;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    gap: .2rem;
    margin: 0;
    padding: .65rem;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-surface-solid);
    box-shadow: var(--app-shadow-hover);
  }
  .nav-links .nav-link { min-height: 44px; display: flex; align-items: center; padding: .65rem .8rem; border-radius: 10px; }
  .nav-links .nav-link:hover, .nav-links .nav-link.active { background: var(--app-surface-muted); }
  .nav-toggle:checked ~ .nav-links { display: flex; flex-direction: column; }
  .nav-right { flex: 0 0 auto; margin: 0; gap: .45rem; }
  .icon-button, .activity-toggle { width: 44px; height: 44px; }
  .profile-menu summary { min-height: 44px; }
  .nav-username { display: none; }
  .activity-panel { position: fixed; top: 74px; right: 1rem; left: 1rem; width: auto; max-height: calc(100dvh - 90px); }
  .profile-dropdown { position: fixed; top: 74px; right: 1rem; left: auto; width: min(320px, calc(100vw - 2rem)); min-width: 0; }

  .page-content { padding-top: clamp(2rem, 5vw, 3rem); }
  .dashboard-grid, .hero-panel, .landing-principles, .landing-agent-story { grid-template-columns: 1fr; }
  .search-form { grid-template-columns: minmax(0, 1fr) minmax(10rem, 13rem); }
  .search-form .app-button { grid-column: 1 / -1; }
  .library-cta { min-height: 190px; }
  .upload-panel { gap: 1.25rem; }
  .preview-layout { min-height: 0; }
  .preview-canvas { min-height: min(48vh, 430px); }
  #previewImage, #previewFrame { max-height: 48vh; }
  #previewFrame { height: 48vh; }
  .integration-card { padding: 1.25rem; }
  .settings-workspace { grid-template-columns: 1fr; }
  .settings-navigation { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  body { margin-bottom: 0; }
  .top-nav-inner { padding-inline: .75rem; }
  .nav-brand { font-size: 1.05rem; }
  .nav-right { gap: .3rem; }
  .nav-button { min-height: 42px; display: inline-flex; align-items: center; padding-inline: .7rem; }
  .global-add-menu > summary { font-size: 0; }
  .global-add-menu > summary::after { content: '+'; font-size: 1.2rem; line-height: 1; }
  .global-add-menu > div { top: 74px; right: .75rem; left: .75rem; }
  .activity-panel { right: .75rem; left: .75rem; }
  .profile-dropdown { right: .75rem; width: min(320px, calc(100vw - 1.5rem)); }

  .page-content { padding: 1.75rem .85rem 3rem; }
  .app-alert { margin: -.5rem 0 1.25rem; }
  .dashboard-heading, .library-heading, .things-heading, .graph-page-heading,
  .details-page-heading, .timeline-heading, .settings-heading {
    margin-bottom: 1.5rem;
  }
  .dashboard-heading h1, .library-heading h1, .things-heading h1,
  .graph-page-heading h1, .details-page-heading h1, .timeline-heading h1,
  .settings-heading h1 {
    font-size: clamp(2.25rem, 12vw, 3.25rem);
    overflow-wrap: anywhere;
  }
  .landing-hero .hero-copy h1 { font-size: clamp(2.45rem, 13vw, 4rem); }
  .about-grid { grid-template-columns: 1fr; }
  .about-card:first-child { grid-column: auto; }
  .landing-focus-banner { align-items: stretch; flex-direction: column; }
  .landing-focus-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .landing-focus-selector a { padding-inline: .55rem; text-align: center; }
  .hero-panel { gap: 1.75rem; padding: 1.5rem; border-radius: 22px; }
  .landing-use-case-grid, .landing-focus-story-grid { grid-template-columns: 1fr; }
  .landing-intro { margin-block: 3.5rem; }
  .landing-focus-story, .landing-agent-story { padding: 1.5rem; border-radius: 22px; }
  .landing-agent-trust { grid-template-columns: auto minmax(0, 1fr); }
  .landing-agent-trust .integration-secondary { grid-column: 1 / -1; width: 100%; }
  .inbox-heading, .inbox-detail > header { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .inbox-filters { grid-template-columns: 1fr; }
  .workspace-invitation-row { grid-template-columns: 1fr; gap: .75rem; }
  .workspace-invitation-actions { flex-wrap: wrap; }
  .inbox-list-item { grid-template-columns: 1fr; }
  .inbox-list-actions { flex-wrap: wrap; padding: 0 1rem .75rem; }
  .inbox-share-summary { grid-template-columns: 1fr; }
  .inbox-pagination { flex-wrap: wrap; }
  .workspace-create-shell { grid-template-columns: 1fr; gap: 1.5rem; margin: 1.5rem auto; }
  .workspace-manage-grid { grid-template-columns: 1fr; }
  .workspace-switcher > summary { min-width: 0; }
  .workspace-switcher-menu { position: fixed; top: 72px; right: .75rem; left: .75rem; width: auto; }
  .landing-cta { gap: 1.25rem; padding: 1.5rem; border-radius: 22px; }
  .landing-cta .app-button, .landing-actions .app-button { width: 100%; }

  .search-form, .things-toolbar { grid-template-columns: 1fr; }
  .search-form .app-button { grid-column: auto; width: 100%; }
  .library-cta { min-height: 165px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edge-stat-row { grid-template-columns: minmax(6rem, 1fr) minmax(3rem, 1fr) 2rem; gap: .5rem; }
  .section-heading, .files-section-heading, .search-results-heading,
  .edge-stats-heading, .on-this-day-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .75rem;
  }
  .on-this-day-date-navigation { max-width: 100%; flex-wrap: wrap; }
  .on-this-day-picker > summary { min-width: 0; }
  .on-this-day-picker > summary h2 { font-size: 1.2rem; }
  .on-this-day-picker-panel { left: -2.6rem; }
  .search-table-wrap, .admin-invitation-table-wrap { margin-inline: -.35rem; }

  .upload-panel { margin-bottom: 2rem; padding: 1rem; }
  .upload-form, .file-input-wrap, .upload-kind-wrap, .upload-intent-picker { width: 100%; min-width: 0; }
  .upload-intent-picker { flex-direction: column; }
  .upload-intent-picker label { border-right: 0; border-bottom: 1px solid var(--app-border); }
  .upload-intent-picker label:last-child { border-bottom: 0; }
  .file-picker { width: 100%; }
  .library-selection-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thumb-actions { opacity: 1; transform: none; }

  .things-heading { margin-top: 0; }
  .things-heading .app-button { width: 100%; }
  .things-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thing-card { grid-template-rows: 132px 1fr; min-height: 280px; }
  .thing-card-copy { padding: 1rem; }

  .detail-option-card { gap: 1rem; padding: 1.1rem; border-radius: 18px; }
  .detail-option-number { width: 2.6rem; height: 2.6rem; }
  .vertex-editor-metadata { grid-template-columns: 1fr; }
  .vertex-editor-detail-row,
  .vertex-editor-new-detail {
    grid-template-columns: minmax(0, 1fr) 2.5rem;
    gap: .45rem .6rem;
    padding: .8rem;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: var(--app-surface-muted);
  }
  .vertex-editor-detail-row > label,
  .vertex-editor-detail-row > input:not([type='hidden']),
  .vertex-editor-detail-row > select,
  .vertex-editor-detail-row > small {
    grid-column: 1;
  }
  .vertex-editor-detail-row > .remove-vertex-detail { grid-column: 2; grid-row: 1; }
  .vertex-note-card { grid-template-columns: 1fr; }
  .vertex-note-card form { justify-self: end; }
  .vertex-modal-content { height: calc(100dvh - 1rem); max-height: calc(100dvh - 1rem); border-radius: 16px; }
  .vertex-modal-content .modal-header, .vertex-modal-content .modal-footer,
  .vertex-question-modal .modal-header, .vertex-question-modal .modal-footer { padding: 1rem; }
  .vertex-modal-content .modal-body, .vertex-question-modal .modal-body { padding: 1rem; }
  .modal-dialog { margin: .5rem; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; }

  .preview-dialog { width: calc(100vw - 1rem); max-width: none; }
  .preview-dialog .modal-content { max-height: calc(100dvh - 1rem); border-radius: 16px; }
  .preview-canvas { min-height: 280px; }
  .preview-sidebar { max-height: 42vh; }

  .timeline-day-picker { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: .5rem; }
  .timeline-date-form { grid-template-columns: 1fr; gap: .35rem; }
  .timeline-date-form select { grid-row: auto; grid-column: auto; width: 100%; min-width: 0; }

  .integration-card, .openai-card { grid-template-columns: 1fr; }
  .settings-navigation { display: flex; padding: .5rem; overflow-x: auto; scrollbar-width: thin; }
  .settings-navigation a { flex: 0 0 auto; min-width: 9.5rem; }
  .integration-icon { width: 46px; height: 46px; }
  .integration-actions { grid-column: auto; width: 100%; align-items: stretch; flex-direction: column; }
  .integration-actions form, .integration-actions .btn,
  .integration-form-actions .btn { width: 100%; }
  .integration-form-actions { flex-direction: column; }
  .invitation-link-panel { min-width: 0; }

  .graph-workspace { min-height: 650px; }
  .graph-toolbar { gap: .5rem; padding: .65rem; }
  .graph-filters { width: 100%; overflow-x: auto; }
  .graph-filter { flex: 0 0 auto; }
  .graph-stage-wrap { height: 520px; }
  .node-inspector { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: 72%; overflow-y: auto; border-top: 1px solid var(--app-border); border-left: 0; transform: translateY(105%); }
  .node-inspector.open { transform: none; }
  .graph-workspace:has(.graph-composer-panel:not([hidden])) .node-inspector { max-height: 46%; }
  .graph-workspace:has(.node-inspector.open) .graph-composer-panel:not([hidden]) { max-height: 210px; overflow-y: auto; }
}

@media (max-width: 479.98px) {
  .nav-brand > span:last-child { display: none; }
  .nav-left { flex: 0 1 auto; }
  .nav-toggle-label { width: 42px; height: 42px; }
  .top-nav-inner { gap: .35rem; }
  .page-content { padding-inline: .7rem; }
  .surface-card, .upload-panel, .detail-option-card, .integration-card { border-radius: 16px; }
  .stat-grid, .thumb-grid, .things-grid { grid-template-columns: 1fr; }
  .stat-card strong { font-size: 2.2rem; }
  .file-picker { grid-template-columns: 1fr; }
  .file-picker-action { min-height: 40px; justify-content: center; border-right: 0; border-bottom: 1px solid var(--app-border); }
  .file-picker-name { min-height: 40px; display: flex; align-items: center; }
  .thumb-grid-item:hover, .thing-card:hover { transform: none; }
  .timeline-day-picker { grid-template-columns: 42px minmax(0, 1fr) 42px; }
  .timeline-date-form strong { font-size: .85rem; }
  .document-details > div, .vertex-modal-details > div, .inspector-details { grid-template-columns: 1fr; gap: .25rem; }
  .document-details dd, .vertex-modal-details dd, .inspector-details dd { text-align: left; }
  .create-object-actions { flex-direction: column-reverse; }
  .create-object-actions .btn { width: 100%; }
  .global-add-panel, .template-field-grid { grid-template-columns: 1fr; }
  .template-field-wide { grid-column: auto; }
  .processing-overlay { padding: .75rem; }
  .processing-popup { grid-template-columns: 1fr; text-align: center; }
  .processing-spinner { margin-inline: auto; }
}

@media (hover: none), (pointer: coarse) {
  .thumb-actions { opacity: 1; transform: none; }
  .thumb-grid-item:hover, .thing-card:hover, .timeline-index-card:hover,
  .app-button:hover { transform: none; }
  .nav-link, .btn, button, summary, select { touch-action: manipulation; }
}

@media (max-width: 767.98px) {
  .landing-demo-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .landing-demo-carousel { min-height: 660px; }
  .landing-demo-slide { grid-template-columns: 1fr; align-content: start; gap: 1.25rem; }
  .landing-demo-copy p { max-width: none; }
  .demo-window { transform: none; }
  .demo-receipt-layout { min-height: 285px; }
  .demo-week { min-height: 280px; overflow-x: auto; grid-template-columns: repeat(7, minmax(64px, 1fr)); }
  .demo-enrich-layout { min-height: 285px; }
}

@media (max-width: 479.98px) {
  .landing-demo-carousel { min-height: 690px; border-radius: 20px; }
  .landing-demo-slide { padding: 1.15rem; }
  .demo-import-action { grid-template-columns: auto minmax(0, 1fr); }
  .demo-import-action button { grid-column: 1 / -1; width: 100%; }
  .demo-calendar-open { display: none; }
  .demo-contact-row { gap: .35rem; padding: .65rem; }
  .demo-person-card { padding-inline: .2rem; }
  .demo-receipt-layout { grid-template-columns: .9fr 1.1fr; gap: .6rem; padding: .8rem; }
  .demo-paper { padding: 1rem .65rem; }
  .landing-demo-side { top: auto; bottom: .7rem; width: 42px; height: 42px; transform: none; }
  .demo-enrich-layout { grid-template-columns: .8fr 1.2fr; gap: .55rem; padding: .7rem; }
  .demo-book-card, .demo-ai-panel { padding: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-demo-slide, .landing-demo-dots button,
  .landing-demo-slide.is-active .demo-import-action button,
  .landing-demo-slide.is-active .demo-activity,
  .landing-demo-slide.is-active .demo-spinner,
  .landing-demo-slide.is-active .demo-person-card,
  .landing-demo-slide.is-active .demo-scan-line,
  .landing-demo-slide.is-active .demo-facts > div,
  .landing-demo-slide.is-active .demo-event,
  .landing-demo-slide.is-active .demo-ai-thinking i,
  .landing-demo-slide.is-active .demo-ai-answer,
  .landing-demo-slide.is-active .demo-ai-follow-ups,
  .landing-demo-slide.is-active .demo-save-note,
  .landing-demo-slide.is-active .demo-note-saved { animation: none; transition: none; }
  .landing-demo-slide.is-active .demo-activity,
  .landing-demo-slide.is-active .demo-person-card,
  .landing-demo-slide.is-active .demo-facts > div,
  .landing-demo-slide.is-active .demo-event,
  .landing-demo-slide.is-active .demo-ai-answer,
  .landing-demo-slide.is-active .demo-ai-follow-ups,
  .landing-demo-slide.is-active .demo-save-note,
  .landing-demo-slide.is-active .demo-note-saved { opacity: 1; transform: none; }
}
.library-tabs {
    display: flex;
    gap: .4rem;
    margin: 1rem 0 1.25rem;
    overflow-x: auto;
    padding-bottom: .2rem;
}

.library-tabs a {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    font-weight: 650;
    padding: .55rem .9rem;
    text-decoration: none;
    white-space: nowrap;
}

.library-tabs a:hover,
.library-tabs a.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.global-add-primary a:first-of-type { font-weight: 750; }
.global-add-more { border-top: 1px solid var(--border-color); margin-top: .35rem; padding-top: .55rem; }
.global-add-more > summary { color: var(--text-muted); cursor: pointer; font-size: .82rem; font-weight: 700; padding: .35rem .55rem; }
.upload-options { min-width: min(100%, 22rem); }
.upload-options > summary { cursor: pointer; font-weight: 700; }
.upload-options > summary small { color: var(--text-muted); display: block; font-weight: 500; }
.upload-options[open] > summary { margin-bottom: .65rem; }
.upload-review-banner { align-items: center; display: grid; gap: 1rem; grid-template-columns: auto minmax(0, 1fr) auto; margin-bottom: 1.25rem; padding: 1rem 1.15rem; }
.upload-review-state { align-items: center; background: color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 50%; color: var(--primary); display: inline-flex; font-size: 1.25rem; height: 2.75rem; justify-content: center; width: 2.75rem; }
.upload-review-banner h2, .upload-review-banner p { margin: 0; }
.upload-review-banner.is-complete .upload-review-state { background: #dff5e8; color: #18794e; }
@media (max-width: 640px) { .upload-review-banner { grid-template-columns: auto 1fr; } .upload-review-banner .btn { grid-column: 1 / -1; } }
.record-workspace-nav { align-items: center; background: var(--surface-solid, var(--app-surface-solid)); border: 1px solid var(--border-color); border-radius: 999px; display: flex; gap: .2rem; margin: 0 0 1.25rem; overflow-x: auto; padding: .35rem; position: sticky; top: 4.5rem; z-index: 20; }
.record-workspace-nav a, .record-workspace-nav button { background: transparent; border: 0; border-radius: 999px; color: var(--text-muted); font: inherit; font-size: .86rem; font-weight: 700; padding: .55rem .8rem; text-decoration: none; white-space: nowrap; }
.record-workspace-nav a:hover, .record-workspace-nav button:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
#record-overview, #record-evidence, #record-details, #record-connections, #record-notes { scroll-margin-top: 9rem; }
.dashboard-actions { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.25rem 0; }
.dashboard-actions a { align-items: center; display: grid; gap: .15rem .75rem; grid-template-columns: auto 1fr; padding: 1rem; text-decoration: none; }
.dashboard-actions a > span { align-items: center; background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: .75rem; color: var(--primary); display: inline-flex; font-size: 1.2rem; grid-row: 1 / 3; height: 2.75rem; justify-content: center; width: 2.75rem; }
.dashboard-actions strong { color: var(--text-primary); }
.dashboard-actions small { color: var(--text-muted); }
.dashboard-insights > summary { cursor: pointer; list-style: none; }
.dashboard-insights > summary::-webkit-details-marker { display: none; }
.dashboard-insights > summary > span { color: var(--primary); font-weight: 700; }
.dashboard-insights[open] > summary > span { font-size: 0; }
.dashboard-insights[open] > summary > span::after { content: 'Hide insights'; font-size: .9rem; }
@media (max-width: 760px) { .dashboard-actions { grid-template-columns: 1fr; } }
.integration-attention { background: color-mix(in srgb, var(--app-warning, #d79a2b) 12%, var(--app-surface-muted)); border: 1px solid color-mix(in srgb, var(--app-warning, #d79a2b) 45%, var(--app-border)); border-radius: 12px; display: grid; gap: .2rem; margin-top: 1rem; padding: .8rem 1rem; }
.integration-attention strong { color: var(--app-text); }
.integration-attention span { color: var(--app-text-muted); }