@font-face { font-family: 'JDTO Sans'; src: url('/assets/resume-fonts/NotoSansSC-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JDTO Serif'; src: url('/assets/resume-fonts/NotoSerifSC-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
.document-person { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.document-person.has-portrait { grid-template-columns: minmax(0, 1fr) 80px; }
.document-person-main { min-width: 0; }.document-person h2, .document-person-headline { overflow-wrap: anywhere; }
.document-portrait { display: block; width: 80px; height: 106.667px; object-fit: cover; border-radius: 3px; }
.document-paper[data-template] .document-person, .document-paper[data-template] .document-section-heading { border-color: var(--resume-accent); }
.document-paper[data-template] .document-section-heading :is(input,h3) { color: var(--resume-accent); }
.document-paper[data-template='mono'] .document-person-main, .document-paper[data-template='elegant'] .document-person-main { text-align: center; }
.document-paper[data-template='mono'] .document-person-contacts, .document-paper[data-template='elegant'] .document-person-contacts { text-align: left; }
.document-paper[data-template='mono'] .document-person h2 { color: #242424; }
.document-paper[data-template='business'] .document-person { padding: 18px 18px 36px; border: 0; background: #253d63; }
.document-paper[data-template='business'] .document-person :is(h2,p,dd) { color: #fff; }.document-paper[data-template='business'] .document-person dt { color: #e6ebf4; }
.document-paper[data-template='fresh'] .document-person { padding: 16px 16px 34px; border: 0; border-left: 3px solid #23695d; background: #eff7f4; }
.document-paper[data-template='fresh'] .document-section-heading { padding: 4px 8px; background: #eff7f4; }
.document-paper[data-template='compact'] .document-person h2 { font-size: 27px; }.document-paper[data-template='compact'] .document-section-heading :is(input,h3) { font-size: 16px; }
.document-paper[data-template='elegant'] .document-person h2 { color: #554538; }.document-paper[data-template='elegant'] .document-section-heading { border-bottom: 3px double #554538; }
#document-preview-export { margin-left: auto; font-size: 12px; padding: 8px 12px; }
.document-style-dialog { width: min(820px, calc(100vw - 28px)); max-height: 88dvh; padding: 24px; overflow-y: auto; }
.document-style-dialog .dialog-heading h2 { font-size: 19px; font-weight: 600; }.document-style-dialog .dialog-heading p { margin-top: 5px; font-size: 12px; color: var(--muted); }
.document-style-layout { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 28px; margin-top: 22px; }
.document-style-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; }
.document-style-card { min-width: 0; padding: 9px; border: 1px solid var(--settings-border); border-radius: 9px; color: var(--ink); background: var(--settings-surface); text-align: left; }
.document-style-card:hover { background: var(--settings-subtle); }.document-style-card[aria-pressed='true'] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.document-style-thumbnail { display: flex; flex-direction: column; gap: 6px; min-height: 156px; padding: 14px 10px; background: #fff; border: 1px solid #edf0f3; border-radius: 3px; --mini-accent: #234e83; }
.document-style-thumbnail i { display: block; flex-shrink: 0; }.mini-person { width: 36%; height: 7px; margin-bottom: 1px; background: #27354b; border-radius: 1px; }.mini-contacts { width: 85%; height: 3px; margin-bottom: 3px; background: #d5dce5; }.mini-heading { height: 5px; width: 100%; border-bottom: 1px solid var(--mini-accent); }.mini-lines { width: 100%; height: 18px; background: repeating-linear-gradient(to bottom, #c8d0db 0 2px, transparent 2px 7px); }
.document-style-thumbnail[data-template='mono'] { --mini-accent: #242424; }.document-style-thumbnail[data-template='mono'] :is(.mini-person,.mini-contacts), .document-style-thumbnail[data-template='elegant'] :is(.mini-person,.mini-contacts) { align-self: center; }
.document-style-thumbnail[data-template='business'] { background: linear-gradient(#253d63 0 40px, #fff 40px); }.document-style-thumbnail[data-template='business'] .mini-person { background: #fff; }.document-style-thumbnail[data-template='business'] .mini-contacts { background: #cbd7e9; }
.document-style-thumbnail[data-template='fresh'] { --mini-accent: #23695d; background: linear-gradient(#eff7f4 0 40px, #fff 40px); }.document-style-thumbnail[data-template='fresh'] .mini-heading { background: #eff7f4; }
.document-style-thumbnail[data-template='compact'] { --mini-accent: #324b63; gap: 4px; }.document-style-thumbnail[data-template='compact'] .mini-lines { height: 23px; }
.document-style-thumbnail[data-template='elegant'] { --mini-accent: #554538; }.document-style-thumbnail[data-template='elegant'] .mini-heading { border-bottom: 3px double #554538; }
.document-style-name { display: block; padding: 9px 1px 2px; font-size: 12px; font-weight: 500; }.document-style-name small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
.document-portrait-settings { min-width: 0; padding-left: 22px; border-left: 1px solid var(--settings-border); }.document-portrait-settings h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }.document-portrait-settings h3 small { color: var(--quiet); font-size: 11px; }
.document-portrait-stage { display: grid; place-items: center; width: 132px; height: 176px; margin: 16px auto 12px; overflow: hidden; border: 1px solid var(--settings-border); border-radius: 5px; background: var(--settings-subtle); }.document-portrait-stage canvas { display: block; width: 132px; height: 176px; touch-action: none; cursor: move; }.document-portrait-stage > span { color: var(--quiet); font-size: 30px; }
.document-portrait-actions { display: flex; justify-content: center; align-items: center; gap: 8px; }.document-portrait-settings button { padding: 6px 9px; font-size: 11px; }
#document-portrait-crop { margin-top: 18px; }#document-portrait-crop label { display: flex; align-items: center; gap: 10px; margin: 9px 0; color: var(--muted); font-size: 11px; white-space: nowrap; }#document-portrait-crop input { width: 100%; min-width: 0; accent-color: var(--accent); }#document-portrait-apply { width: 100%; margin-top: 10px; }#document-portrait-status { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }#document-portrait-status.error { color: #c84d5d; }
@media (max-width: 640px) { .document-style-dialog { padding: 18px; }.document-style-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }.document-style-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }.document-portrait-settings { border-left: 0; border-top: 1px solid var(--settings-border); padding: 20px 0 0; }.document-portrait-settings > :is(div,p) { max-width: 260px; margin-inline: auto; } }