/* Original artwork served locally for mobile networks. */
:root {
  --lace-brocade-bg: url('/static/decor/lace_bg.webp?v=lossless-2');
  --lace-paper-inner: url('/static/decor/paper_tex.webp?v=lossless-2');
  --lace-topbar-border: url('/static/decor/topbar_trim.webp?v=lossless-2');
  --lace-wide-trim: url('/static/decor/lace_top.webp?v=lossless-2');
  --lace-center-bow: url('/static/decor/bow_center.webp?v=lossless-2');
  --lace-heart-frame: url('/static/decor/heart_frame.webp?v=lossless-2');
  --lace-corner-left: url('/static/decor/bow_left.webp?v=lossless-2');
  --lace-corner-right: url('/static/decor/bow_right.webp?v=lossless-2');
  --icon-cross-left: url('/static/decor/cross_left.webp?v=lossless-2');
  --icon-cross-right: url('/static/decor/cross_right.webp?v=lossless-2');
  --icon-mini-charm: url('/static/decor/mini_charm.webp?v=lossless-2');
  --icon-mini-bow: url('/static/decor/mini_bow.webp?v=lossless-2');
  --lace-frame-color: #FAF7F8;
  --lace-inner-color: rgba(255,255,255,.93);
  --lace-edge: rgba(225,215,219,.8);
  --lace-ink: #8A7D85;
  --lace-shadow: rgba(225,215,219,.45);
  --lace-art-opacity: 1;
}

body { overflow-x: clip; }
.unlock, .workspace { overflow: clip; }
.sidebar, .topbar, .workspace > footer, .drawer-head {
  background-color: var(--lace-frame-color);
  background-image: var(--lace-brocade-bg);
  background-size: 360px auto;
  border-color: var(--lace-edge);
}
.sidebar { border-bottom: 1px solid var(--lace-edge); }
.brand { color: var(--text-primary); }
.sidebar nav button { border-radius: 6px; }
.sidebar nav button.active { background: var(--lace-inner-color); }
.topbar { margin-bottom: 38px; z-index: 6; }
.topbar::after {
  content: ''; position: absolute; inset: auto 0 -38px; height: 38px;
  background: var(--lace-topbar-border) left top / auto 38px repeat-x;
  opacity: var(--lace-art-opacity); pointer-events: none;
}
.workspace > footer { border-top: 1px solid var(--lace-edge); }

/* Paper sits above the trailing ribbons so text and controls stay unobscured. */
.skin-card.lace-outer-card,
[data-bows="true"] :is(.quote-item,.reader-entry,.inline-note,.unlock-form).lace-outer-card {
  position: relative; isolation: isolate; display: block; min-width: 0;
  padding: 28px 16px 68px; margin: 24px 0 32px;
  background-color: var(--lace-frame-color); background-image: var(--lace-brocade-bg);
  background-size: 45%; background-repeat: repeat;
  border: 1px solid var(--lace-edge); border-radius: 6px;
  box-shadow: 0 5px 24px var(--lace-shadow), inset 0 0 0 5px #ffffff65;
  break-inside: avoid;
}
.lace-outer-card:not(.unlock-form) { overflow: hidden; }
.skin-card.lace-outer-card::before {
  content: ''; position: absolute; inset: 42px 0 auto; height: 60px;
  border: 0; border-radius: 0; pointer-events: none;
  background: var(--lace-wide-trim) left top / auto 60px repeat-x;
  z-index: 1; opacity: var(--lace-art-opacity);
}
.skin-card.lace-outer-card::after {
  content: ''; position: absolute; bottom: -4px; left: -10px; right: -10px;
  height: 135px; background-image: var(--lace-corner-left),var(--lace-corner-right);
  background-position: left bottom,right bottom; background-repeat: no-repeat;
  background-size: contain,contain; pointer-events: none; z-index: 3;
  filter: drop-shadow(0 0 3px rgba(225,215,219,.85));
  opacity: var(--lace-art-opacity); transition: opacity 1.2s ease;
}
.lace-crest {
  position: absolute; width: 96px; height: 96px; top: -88px; left: 50%;
  transform: translateX(-50%); background: var(--lace-heart-frame) center / contain no-repeat;
  pointer-events: none; z-index: 5; opacity: var(--lace-art-opacity);
}
.lace-crest-core {
  position: absolute; top: 25px; left: 25px; width: 46px; height: 32px;
  display: grid; place-items: center; color: var(--lace-ink);
  font: italic 14px var(--font-serif-en);
}
.lace-crest-core svg { width: 22px; height: 22px; }
.lace-card-title {
  position: absolute; top: 14px; left: 8px; right: 8px; text-align: center;
  font-size: 15px; line-height: 24px; color: var(--lace-ink);
  text-shadow: 0 1px 5px #D2CBCE; z-index: 5;
}
.lace-card-title::before { content: '♡♱ '; }
.lace-card-title::after { content: ' ♱♡'; }
.lace-inner-paper {
  position: relative; z-index: 4; min-width: 0; margin: 78px 10px 10px; padding: 20px 22px;
  background-image: var(--lace-paper-inner); background-size: 50%;
  background-blend-mode: screen; background-color: var(--lace-inner-color);
  border: 1px solid rgba(225,216,220,.85); border-radius: 3px;
  box-shadow: 0 2px 6px rgba(225,215,219,.35),inset 0 0 12px #FFFFFF;
  overflow-wrap: anywhere;
}
.lace-inner-paper::before {
  content: ''; position: absolute; top: -53px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 38px; background: var(--lace-center-bow) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px #E1D7DB); pointer-events: none;
  opacity: var(--lace-art-opacity);
}
.lace-card-footer { position: relative; z-index: 4; margin: 20px 8px 0; text-align: center; }
.lace-charms { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; min-height: 36px; }
.lace-charms > span { display: block; width: 32px; height: 32px; background-position: center; background-size: contain; background-repeat: no-repeat; opacity: var(--lace-art-opacity); }
.cross-left { background-image: var(--icon-cross-left); }
.cross-right { background-image: var(--icon-cross-right); }
.mini-charm { background-image: var(--icon-mini-charm); }
.lace-charms i { font: italic 11px/1.8 var(--font-serif-en); color: var(--lace-ink); text-shadow: 0 0 3px #E1D7DB; }
.lace-card-footer .timestamp { margin: 9px 0 0; color: #928F90; font-size: 11px; font-style: italic; text-shadow: 0 0 3px #E1D7DB; }
.lace-card-footer .timestamp::before, .lace-card-footer .timestamp time { font-size: 11px; color: inherit; }
.quote-item .quote-meta { margin: 10px 0 0; }
.quote-item .quote-meta .actions { gap: 7px; flex-wrap: wrap; }
.quote-grid { column-gap: 48px; row-gap: 20px; }
.quote-item .quote-text { max-height: 270px; }
.reader-surface, .reader-surface.paper, .reader-surface.letter, .reader-surface.timeline {
  padding: 0; border: 0; background: transparent; box-shadow: none;
}
.reader-surface::before { content: none; }
.reader-surface.double { gap: 0 48px; align-items: start; }
.reader-entry .entry-meta { font-size: 13px; }
.reader-entry .entry-text { padding-left: 12px; }
.inline-note .lace-inner-paper > .icon { float: right; }
.inline-note .reading-content { font-size: 17px; line-height: 1.9; }
.reader-rail { margin-top: 70px; }

/* Embossed boxes keep the native inputs, labels, and keyboard behavior. */
.ornate-dialog-box, .ornate-command, .toolbar, .reader-filter, .reader-pager, #ai-form {
  position: relative; min-width: 0; border: 1px solid rgba(225,215,219,.85);
  border-radius: 10px; padding: 8px 16px 14px;
  background-color: var(--lace-frame-color); background-image: var(--lace-brocade-bg);
  background-size: contain; background-position: center;
  box-shadow: 0 4px 14px var(--lace-shadow),inset 0 0 10px #FFFFFF;
}
:is(.ornate-dialog-box,.ornate-command,.toolbar,.reader-filter,.reader-pager,#ai-form)::before {
  content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 98%; height: 11px; background: var(--lace-wide-trim) center / auto 11px repeat-x;
  filter: drop-shadow(0 0 2px #E1D7DB); pointer-events: none; opacity: var(--lace-art-opacity);
}
:is(.ornate-dialog-box,.ornate-command,.toolbar,.reader-filter,.reader-pager,#ai-form)::after {
  content: ''; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; background: var(--lace-center-bow) center / contain no-repeat;
  filter: drop-shadow(0 0 1px #84818280); pointer-events: none;
  z-index: 2; opacity: var(--lace-art-opacity);
}
.ornate-dialog-box { display: flex; align-items: stretch; margin-top: 11px; padding-top: 13px; }
.ornate-dialog-box input, .ornate-dialog-box textarea, .unlock-form .ornate-dialog-box input {
  position: relative; z-index: 1; width: 100%; min-width: 0; border-radius: 4px;
  background-color: var(--lace-inner-color); background-image: var(--lace-paper-inner);
  background-size: 50%; background-blend-mode: screen;
  padding: 14px 12px; min-height: 48px; color: var(--text-body); font-size: 16px;
}
.ornate-dialog-box input::placeholder, .ornate-dialog-box textarea::placeholder { color: var(--text-secondary); opacity: 1; font-size: 14px; }
.input-watermark { display: none; position: absolute; z-index: 1; bottom: 17px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; line-height: 14px; color: var(--lace-ink); opacity: .4; pointer-events: none; }
.ornate-dialog-box:has(:placeholder-shown):not(:focus-within) .input-watermark { display: block; }
.ornate-dialog-box:has(:placeholder-shown):not(:focus-within) input { padding-bottom: 23px; padding-top: 5px; }
.ornate-dialog-box:focus-within { outline: 2px solid var(--primary-pink); outline-offset: 2px; }
.ornate-command, .ornate-command:hover { min-height: 52px; padding: 13px 22px; background-color: var(--lace-frame-color); background-image: var(--lace-brocade-bg); color: var(--text-primary); white-space: normal; }
.ornate-command { margin-top: 14px; }
.ornate-command-content { display: flex; align-items: center; justify-content: center; gap: inherit; min-width: 0; padding-top: 6px; }
.toolbar, .reader-filter { margin-top: 28px; padding: 21px 18px 22px; }
.toolbar > .ornate-dialog-box { flex: 1 1 240px; max-width: 360px; }
.reader-filter > .ornate-dialog-box { margin: 0; }
.toolbar > .ornate-dialog-box, .reader-filter > .ornate-dialog-box { background: none; padding: 0; border: 0; box-shadow: none; }
.toolbar > .ornate-dialog-box::before, .toolbar > .ornate-dialog-box::after, .reader-filter > .ornate-dialog-box::before, .reader-filter > .ornate-dialog-box::after { content: none; }
.reader-pager { padding-top: 20px; padding-bottom: 22px; margin-top: 40px; }
#ai-form { margin: 25px 0 20px; padding: 23px 16px; }
.ai-conversation p { background-color: var(--lace-inner-color); background-image: var(--lace-paper-inner); background-size: 50%; background-blend-mode: screen; }
.ai-conversation p::before { content: ''; display: inline-block; width: 24px; height: 22px; margin-right: 6px; vertical-align: middle; background: var(--icon-mini-bow) center / contain no-repeat; }
.drawer-head { padding-bottom: 27px; }
.settings-section { min-width: 0; }
.settings-section .actions > button { white-space: normal; }

.unlock { padding: 110px 24px 48px; align-items: start; }
.unlock-form.lace-outer-card { width: 100%; max-width: 520px; margin: 25px auto 0; text-align: center; backdrop-filter: none; }
.unlock-form.lace-outer-card::after { clip-path: inset(0 10px 4px); }
.unlock-form .lace-inner-paper { padding: 28px 26px; }
.unlock-form h1 { font-size: 27px; line-height: 1.6; }
.unlock-form h1 > span { font-size: 18px; letter-spacing: 0; }
.unlock-form .unlock-caption { margin-bottom: 25px; font-size: 16px; }
.unlock-form label { gap: 5px; margin-bottom: 20px; }
.unlock-form .remember-me { margin-top: 10px; font-size: 12px; }
.unlock-form .primary { width: 100%; gap: 10px; font-size: 17px; }
#note-dialog { padding: 76px 12px 12px; border-radius: 6px; max-height: calc(100dvh - 24px); }
#note-form.lace-outer-card { margin: 0; }
#note-form .dialog-head h2 { font-size: 23px; }
.bond-inscription { flex-wrap: wrap; }
.bond-inscription > div:nth-child(2) { flex: 1; min-width: 150px; }

[data-theme="dark"] {
  --lace-frame-color: #241D22; --lace-inner-color: #2D242B;
  --lace-edge: rgba(212,155,167,.25); --lace-ink: #C8B4BF;
  --lace-shadow: rgba(12,8,11,.55); --lace-art-opacity: .65;
}
[data-theme="dark"] :is(.lace-outer-card,.sidebar,.topbar,.workspace > footer,.drawer-head,.ornate-dialog-box,.ornate-command,.toolbar,.reader-filter,.reader-pager,#ai-form) { background-blend-mode: soft-light; border-color: var(--lace-edge); box-shadow: 0 4px 14px var(--lace-shadow),inset 0 0 10px var(--lace-shadow); }
[data-theme="dark"] .lace-inner-paper { background-blend-mode: soft-light; box-shadow: 0 2px 6px var(--lace-shadow),inset 0 0 12px var(--lace-shadow); border-color: var(--lace-edge); }
[data-theme="dark"] .ornate-dialog-box :is(input,textarea), [data-theme="dark"] .ai-conversation p { background-blend-mode: soft-light; border-color: var(--lace-edge); box-shadow: inset 0 0 10px var(--lace-shadow); }
[data-theme="dark"] :is(.skin-card.lace-outer-card,.ornate-dialog-box,.ornate-command,.toolbar,.reader-filter,.reader-pager,#ai-form)::before,
[data-theme="dark"] :is(.skin-card.lace-outer-card,.ornate-dialog-box,.ornate-command,.toolbar,.reader-filter,.reader-pager,#ai-form,.topbar)::after,
[data-theme="dark"] .lace-inner-paper::before,
[data-theme="dark"] .lace-crest,
[data-theme="dark"] .lace-charms > span,
[data-theme="dark"] .ai-conversation p::before {
  filter: brightness(.48) sepia(.55) hue-rotate(295deg) saturate(1.25) drop-shadow(0 2px 4px rgba(15,10,14,.6)) !important;
  opacity: .65 !important;
}
[data-theme="dark"] .lace-card-footer .timestamp { color: #BEADB6; text-shadow: none; }
[data-theme="dark"] :is(.lace-card-title,.lace-charms i) { text-shadow: none; }
[data-material="glass"] .lace-outer-card { background-color: color-mix(in srgb,var(--lace-frame-color) 50%,transparent); backdrop-filter: blur(14px); }
[data-material="frosted"] .lace-outer-card { background-color: color-mix(in srgb,var(--lace-frame-color) 80%,transparent); backdrop-filter: blur(24px); }
[data-material="transparent"] .lace-outer-card { background: transparent; box-shadow: none; }
[data-material="transparent"] .lace-inner-paper { background: transparent; box-shadow: none; }
[data-bows="false"] :is(.lace-crest,.lace-charms > span) { display: none; }
[data-bows="false"] :is(.lace-outer-card,.ornate-dialog-box,.ornate-command,.toolbar,.reader-filter,.reader-pager,#ai-form,.topbar)::after,
[data-bows="false"] :is(.lace-outer-card,.lace-inner-paper,.ornate-dialog-box,.ornate-command,.toolbar,.reader-filter,.reader-pager,#ai-form)::before { content: none; }
[data-bows="false"] .lace-outer-card { margin-top: 24px; padding: 42px 16px 24px; background-image: none; }
[data-bows="false"] .lace-inner-paper { margin-top: 10px; }
[data-bows="false"] .topbar { margin-bottom: 0; }

@media (max-width: 760px) {
  .quote-grid { row-gap: 10px; }
  .skin-card.lace-outer-card, [data-bows="true"] :is(.quote-item,.reader-entry,.inline-note,.unlock-form).lace-outer-card { padding-left: 8px; padding-right: 8px; }
  .lace-inner-paper { margin: 78px 4px 10px; padding: 20px 16px; }
  .unlock { padding: 100px 14px 32px; }
  .unlock-form.lace-outer-card { margin-top: 20px; }
  .unlock-form .lace-inner-paper { padding: 24px 18px; }
  .unlock-form h1 { font-size: 24px; }
  .unlock-form .unlock-caption { font-size: 15px; }
  .unlock-form .remember-me { flex-wrap: wrap; }
  .reader-surface.double { display: block; }
  .reader-rail { margin-top: 0; }
  .toolbar, .reader-filter { padding: 22px 12px; }
  .toolbar > .ornate-dialog-box { max-width: none; flex-basis: 100%; }
  .reader-filter > .ornate-dialog-box { grid-column: 1 / -1; }
  .reader-filter select { width: 100%; }
  .reader-pager { position: static; }
  .lace-card-title { font-size: 14px; }
  .lace-card-footer { margin-left: 0; margin-right: 0; }
  .drawer-scroll { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .skin-card.lace-outer-card::after { transition: none; }
}