/* Optional full-page visual systems. Default intentionally has no page rules. */

/* Hand-drawn study journal: graph paper, ink outlines and taped note paper. */
body[data-yf-style="handdrawn"] #home {
  background-image: linear-gradient(color-mix(in srgb, var(--yf-primary) 11%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--yf-primary) 11%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
}
body[data-yf-style="handdrawn"] .topbar { border-right: 2px dashed var(--yf-border-strong); background-image: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--yf-primary) 3%, transparent) 6px 7px); }
body.yf-ui-prototype[data-yf-style="handdrawn"] .topbar .primary-nav > a[data-route] { border-radius: 8px 16px 9px 13px / 14px 9px 15px 8px; }
body.yf-ui-prototype[data-yf-style="handdrawn"] .topbar .primary-nav > a.is-active { outline: 1.5px solid var(--yf-primary); outline-offset: -1.5px; box-shadow: 3px 3px 0 color-mix(in srgb, var(--yf-primary) 12%, transparent); }
body[data-yf-style="handdrawn"] .primary-nav .yf-prototype-icon :is(path,line,polyline,rect,circle) { stroke-width: 1.8; }
body.yf-ui-soft[data-yf-style="handdrawn"][data-yf-soft-route="home"] #home .hero-copy h1 { font-family: "Kaiti SC", STKaiti, KaiTi, serif; font-size: clamp(33px, 3.1vw, 43px); font-weight: 600; letter-spacing: .035em; line-height: 1.4; text-decoration: underline; text-decoration-color: var(--yf-accent); text-decoration-thickness: 3px; text-underline-offset: 12px; }
body[data-yf-style="handdrawn"]:not(.is-conversation-mode) #home .hero-brand-line { width: max-content; margin-inline: auto; padding: 4px 15px; border: 1px dashed var(--yf-border-strong); border-radius: 3px 7px 4px 6px; background: var(--yf-surface); }
body[data-yf-style="handdrawn"]:not(.is-conversation-mode) #home .hero-stage::before,
body[data-yf-style="handdrawn"]:not(.is-conversation-mode) #home .hero-stage::after { content: ''; display: block; position: absolute; top: -31px; left: 44px; width: 90px; height: 25px; z-index: 3; pointer-events: none; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--yf-accent) 23%, transparent) 0 5px, color-mix(in srgb, var(--yf-accent) 31%, transparent) 5px 6px); border-inline: 1px dashed color-mix(in srgb, var(--yf-accent) 65%, transparent); transform: rotate(-5deg); }
body[data-yf-style="handdrawn"]:not(.is-conversation-mode) #home .hero-stage::after { left: auto; right: 42px; transform: rotate(4deg); }
body.yf-ui-soft[data-yf-style="handdrawn"][data-yf-soft-route="home"] #home #searchForm.composer { border: 1.8px solid var(--yf-border-strong); border-radius: 8px 15px 10px 13px / 12px 9px 16px 8px; background: var(--yf-surface); box-shadow: 5px 6px 0 color-mix(in srgb, var(--yf-primary) 15%, var(--yf-page-bg)); }
body.yf-ui-soft[data-yf-style="handdrawn"][data-yf-soft-route="home"] #home #chatInput { background: repeating-linear-gradient(transparent 0 23px, color-mix(in srgb, var(--yf-primary) 15%, transparent) 23px 24px); background-position: 0 7px; }
body.yf-ui-prototype[data-yf-style="handdrawn"] #home #searchForm :is(#chatActionBtn,#uploadMoreBtn,#chatModelBtn) { border-radius: 6px 10px 5px 9px; }
body.yf-ui-prototype[data-yf-style="handdrawn"] #home .chat-message-assistant { padding: 24px; border: 1.5px solid var(--yf-border-strong); border-radius: 8px 15px 9px 12px; background: var(--yf-surface); box-shadow: 4px 5px 0 color-mix(in srgb, var(--yf-primary) 12%, var(--yf-page-bg)); }
body[data-yf-style="handdrawn"] #home .chat-message-body :is(h2,h3) { width: fit-content; max-width: 100%; text-decoration: underline; text-decoration-color: var(--yf-accent); text-decoration-thickness: 3px; text-underline-offset: 7px; }
body[data-yf-style="handdrawn"] #home .chat-message-body blockquote { border: 1px dashed var(--yf-border-strong); border-left: 3px solid var(--yf-accent); border-radius: 3px 9px 4px 7px; }

/* Minimal focus tool: no input card, large calm type and rule-based navigation. */
body.yf-ui-prototype[data-yf-style="minimal"] .topbar .primary-nav > a[data-route] { border-radius: 0; background: transparent; }
body.yf-ui-prototype[data-yf-style="minimal"] .topbar .primary-nav > a.is-active { color: var(--yf-text); box-shadow: inset 2px 0 var(--yf-primary); }
body.yf-ui-prototype[data-yf-style="minimal"] .topbar .primary-nav > a:hover { background: var(--yf-primary-soft); }
body.yf-ui-soft[data-yf-style="minimal"][data-yf-soft-route="home"] #home .hero-copy h1 { font-size: clamp(32px, 3.2vw, 42px); font-weight: 450; line-height: 1.35; letter-spacing: -.045em; }
body[data-yf-style="minimal"] #home .hero-brand-line { font-weight: 400; letter-spacing: .12em; }
body[data-yf-style="minimal"] #home .hero-brand-dot { width: 3px; height: 3px; animation: none; }
body.yf-ui-soft[data-yf-style="minimal"][data-yf-soft-route="home"] #home #searchForm.composer { border: 0; border-top: 1px solid var(--yf-border-strong); border-bottom: 1px solid var(--yf-border-strong); border-radius: 0; padding: 18px 0 12px; background: transparent; box-shadow: none; }
body.yf-ui-soft[data-yf-style="minimal"][data-yf-soft-route="home"] #home #searchForm.composer:focus-within { border-color: var(--yf-primary); box-shadow: none; }
body.yf-ui-soft[data-yf-style="minimal"][data-yf-soft-route="home"]:not(.is-conversation-mode) #home #chatInput { height: 68px; min-height: 68px; background: transparent; }
body.yf-ui-prototype[data-yf-style="minimal"] #home #searchForm :is(#chatActionBtn,#uploadMoreBtn,#chatModelBtn) { border-radius: 2px; }
body.yf-ui-prototype[data-yf-style="minimal"] #home .chat-message-assistant { padding: 20px 0 28px; border: 0; border-bottom: 1px solid var(--yf-border); border-radius: 0; background: transparent; box-shadow: none; }
body[data-yf-style="minimal"] #home .chat-message-body :is(h2,h3) { letter-spacing: -.025em; font-weight: 550; }
body[data-yf-style="minimal"] #home .chat-message-body blockquote { border: 0; border-left: 2px solid var(--yf-border-strong); border-radius: 0; background: transparent; }

/* Open textbook: a real page silhouette, left-aligned editorial title and page rules. */
body[data-yf-style="book"]:not(.is-conversation-mode) #home { position: relative; isolation: isolate; }
body[data-yf-style="book"]:not(.is-conversation-mode) #home::before { content: ''; display: block; position: absolute; z-index: -1; top: 44px; bottom: 52px; left: 50%; right: auto; width: min(880px, calc(100% - 76px)); height: auto; transform: translateX(-50%); border: 1px solid var(--yf-border); border-left: 7px double var(--yf-border-strong); background: var(--yf-surface); box-shadow: 6px 7px 0 var(--yf-page-bg), 7px 8px 0 var(--yf-border); pointer-events: none; }
body[data-yf-style="book"]:not(.is-conversation-mode) #home::after { content: 'YFLOS   /   学习札记'; display: block; position: absolute; z-index: -1; bottom: 78px; left: max(76px, calc(50% - 370px)); right: max(76px, calc(50% - 370px)); padding-top: 10px; border-top: 1px solid var(--yf-border); color: var(--yf-muted); font-size: 10px; letter-spacing: .16em; pointer-events: none; }
body[data-yf-style="book"] #home .hero-copy { text-align: left; }
body[data-yf-style="book"]:not(.is-conversation-mode) #home .hero-brand-eyebrow { align-items: flex-start; }
body[data-yf-style="book"] #home .hero-brand-line { letter-spacing: .12em; }
body.yf-ui-soft[data-yf-style="book"][data-yf-soft-route="home"] #home .hero-copy h1 { font-family: "Songti SC", STSong, "Noto Serif CJK SC", serif; font-size: clamp(34px, 3vw, 42px); line-height: 1.4; font-weight: 600; letter-spacing: .04em; }
body[data-yf-style="book"] #home .hero-copy h1 span { display: block; }
body.yf-ui-soft[data-yf-style="book"][data-yf-soft-route="home"] #home #searchForm.composer { border: 0; border-top: 2px solid var(--yf-text); border-bottom: 1px solid var(--yf-border-strong); border-radius: 0; background: transparent; box-shadow: none; padding: 16px 0 12px; }
body.yf-ui-soft[data-yf-style="book"][data-yf-soft-route="home"] #home #searchForm.composer:focus-within { box-shadow: none; border-top-color: var(--yf-primary); }
body.yf-ui-prototype[data-yf-style="book"] .topbar .primary-nav > a[data-route] { border-radius: 0; }
body.yf-ui-prototype[data-yf-style="book"] .topbar .primary-nav > a.is-active { box-shadow: inset 3px 0 var(--yf-accent); background: color-mix(in srgb, var(--yf-accent) 12%, var(--yf-page-bg)); }
body.yf-ui-prototype[data-yf-style="book"] #home #searchForm :is(#chatActionBtn,#uploadMoreBtn,#chatModelBtn) { border-radius: 2px; }
body.yf-ui-prototype[data-yf-style="book"] #home .chat-message-assistant { padding: 30px 28px; border: 1px solid var(--yf-border); border-left: 5px double var(--yf-border-strong); border-radius: 0; background: var(--yf-surface); box-shadow: 4px 4px 0 var(--yf-page-bg), 5px 5px 0 var(--yf-border); }
body[data-yf-style="book"] #home .chat-message-body :is(h2,h3) { font-family: "Songti SC", STSong, serif; padding-bottom: 10px; border-bottom: 1px solid var(--yf-border); letter-spacing: .04em; }
body[data-yf-style="book"] #home .chat-message-body blockquote { border-radius: 0; border-left-color: var(--yf-accent); }

/* Small screens keep the same controls and adapt the same visual language. */
@media (max-width: 720px) {
  body.yf-ui-soft[data-yf-style="handdrawn"][data-yf-soft-route="home"] #home .hero-copy h1 { font-size: 28px; text-underline-offset: 9px; }
  body[data-yf-style="handdrawn"]:not(.is-conversation-mode) #home .hero-stage::before,
  body[data-yf-style="handdrawn"]:not(.is-conversation-mode) #home .hero-stage::after { width: 54px; height: 20px; top: -9px; left: 18px; }
  body[data-yf-style="handdrawn"]:not(.is-conversation-mode) #home .hero-stage::after { left: auto; right: 18px; }
  body.yf-ui-soft[data-yf-style="minimal"][data-yf-soft-route="home"] #home .hero-copy h1 { font-size: 28px; }
  body[data-yf-style="book"]:not(.is-conversation-mode) #home::before { top: 84px; bottom: 24px; width: calc(100% - 18px); }
  body[data-yf-style="book"]:not(.is-conversation-mode) #home::after { bottom: 42px; left: 28px; right: 28px; font-size: 9px; }
  body[data-yf-style="book"] #home .hero-copy { padding-inline: 12px; }
  body.yf-ui-soft[data-yf-style="book"][data-yf-soft-route="home"] #home .hero-copy h1 { font-size: 30px; }
  body.yf-ui-prototype[data-yf-style="handdrawn"] #home .chat-message-assistant,
  body.yf-ui-prototype[data-yf-style="book"] #home .chat-message-assistant { padding: 18px 14px; }
}

/* Style picker stays neutral so the four previews remain easy to compare. */
.ps-style-pane:not([hidden]) { animation: ps-pane-in .16s ease-out; }
.ps-style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ps-style-option { min-width: 0; padding: 8px; border: 1px solid var(--yf-border); border-radius: 11px; background: var(--yf-surface); text-align: left; color: var(--yf-text); }
.ps-style-option:hover { border-color: var(--yf-border-strong); }
.ps-style-option[aria-pressed="true"] { border-color: var(--yf-primary); box-shadow: 0 0 0 1px var(--yf-primary); }
.ps-style-option:focus-visible { outline: 2px solid var(--yf-primary); outline-offset: 3px; }
.ps-style-option > strong { display: block; margin-top: 9px; font-size: 13px; font-weight: 600; }
.ps-style-option > small { display: block; margin-top: 3px; color: var(--yf-muted); font-size: 10px; line-height: 1.6; }
.ps-style-thumb { position: relative; display: flex; height: 84px; border: 1px solid var(--yf-border); border-radius: 7px; overflow: hidden; background: var(--yf-page-bg); }
.ps-style-thumb-rail { flex: 0 0 25%; padding: 13px 6px; border-right: 1px solid var(--yf-border); }
.ps-style-thumb-rail i { display: block; width: 100%; height: 4px; margin: 0 0 9px; background: var(--yf-border-strong); border-radius: 2px; }
.ps-style-thumb-rail i:first-child { background: var(--yf-primary); }
.ps-style-thumb-main { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; padding: 10px; }
.ps-style-thumb-title { display: block; margin-bottom: 10px; text-align: center; font-size: 9px; font-weight: 600; white-space: nowrap; }
.ps-style-thumb-input { position: relative; display: block; height: 32px; padding: 8px 6px; border: 1px solid var(--yf-border); border-radius: 8px; background: var(--yf-surface); }
.ps-style-thumb-input::before { content: ''; display: block; width: 55%; height: 2px; background: var(--yf-border-strong); }
.ps-style-thumb-input::after { content: ''; position: absolute; right: 5px; bottom: 4px; width: 6px; height: 6px; border-radius: 2px; background: var(--yf-primary); }

.ps-style-option[data-style="handdrawn"] .ps-style-thumb { background-image: linear-gradient(var(--yf-border) 1px, transparent 1px),linear-gradient(90deg,var(--yf-border) 1px,transparent 1px); background-size: 9px 9px; }
.ps-style-option[data-style="handdrawn"] .ps-style-thumb-title { font-family: "Kaiti SC",STKaiti,serif; font-size: 10px; text-decoration: underline; text-decoration-color: var(--yf-accent); text-underline-offset: 3px; }
.ps-style-option[data-style="handdrawn"] .ps-style-thumb-input { border-radius: 3px 8px 4px 6px; border-color: var(--yf-border-strong); box-shadow: 2px 3px 0 var(--yf-border); }
.ps-style-option[data-style="handdrawn"] .ps-style-thumb-main::before { content: ''; position: absolute; z-index: 2; width: 30px; height: 8px; left: 17px; top: 40px; background: color-mix(in srgb,var(--yf-accent) 40%,transparent); transform: rotate(-5deg); }
.ps-style-option[data-style="minimal"] .ps-style-thumb-input { height: 24px; padding-inline: 0; border: 0; border-top: 1px solid var(--yf-border-strong); border-bottom: 1px solid var(--yf-border-strong); border-radius: 0; background: transparent; }
.ps-style-option[data-style="minimal"] .ps-style-thumb-title { font-size: 10px; font-weight: 400; }
.ps-style-option[data-style="minimal"] .ps-style-thumb-rail i { height: 2px; border-radius: 0; }
.ps-style-option[data-style="book"] .ps-style-thumb-main { margin: 5px 7px; padding: 7px; border: 1px solid var(--yf-border); border-left: 3px double var(--yf-border-strong); background: var(--yf-surface); }
.ps-style-option[data-style="book"] .ps-style-thumb-title { width: 62px; max-width: 100%; margin-bottom: 5px; font-family: "Songti SC",STSong,serif; text-align: left; white-space: normal; line-height: 1.4; letter-spacing: .05em; }
.ps-style-option[data-style="book"] .ps-style-thumb-input { height: 21px; padding-inline: 0; border: 0; border-top: 1px solid var(--yf-text); border-bottom: 1px solid var(--yf-border); border-radius: 0; background: transparent; }
.ps-style-note { margin: 16px 0 0; color: var(--yf-muted); font-size: 11px; line-height: 1.7; }
.ps-tabs { gap: 16px; }
.ps-tab { white-space: nowrap; }
@media (max-width: 720px) {
  body[data-yf-style="book"] #home { background-image: none; }
  .ps-tabs { gap: 16px; }
  .ps-style-thumb { height: 88px; }
}
@media (prefers-reduced-motion: reduce) { .ps-style-pane { animation: none !important; } }