:root {
  color-scheme: light;
  --bg: #f6f4ed; --panel: #fffdf7; --paper-bg: #e8e5dc; --tile: #eee9de;
  --ink: #22231d; --muted: #666456; --line: #dbd7ca; --focus: #b9382a;
  --accent: #b9382a; --on-accent: #fffaf2; --solid: #25261f; --on-solid: #fffdf3;
  --hero: #e5ddd0; --hero-line: #b2a696; --hero-ink: #5f4d3d;
  font-family: "DM Sans", "Segoe UI", system-ui, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #201f1b; --panel: #27261f; --paper-bg: #302e26; --tile: #343126;
  --ink: #fff7e9; --muted: #c3baaa; --line: #484437; --focus: #ff9f85;
  --accent: #ffad97; --on-accent: #2b1711; --solid: #f1e9d8; --on-solid: #22211c;
  --hero: #413a2f; --hero-line: #82705b; --hero-ink: #f5ddbf;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #201f1b; --panel: #27261f; --paper-bg: #302e26; --tile: #343126;
    --ink: #fff7e9; --muted: #c3baaa; --line: #484437; --focus: #ff9f85;
    --accent: #ffad97; --on-accent: #2b1711; --solid: #f1e9d8; --on-solid: #22211c;
    --hero: #413a2f; --hero-line: #82705b; --hero-ink: #f5ddbf;
  }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); }
h1, h2, h3, p { margin: 0; }
p { line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.wrap { width: min(calc(100% - 32px), 1240px); margin-inline: auto; }
.skip-link { position: fixed; top: 10px; left: 10px; transform: translateY(-150%); padding: 10px; z-index: 10; background: var(--panel); }
.skip-link:focus { transform: none; }
.topbar { border-bottom: 1px solid var(--line); }
.topbar-row, nav, .brand, .hero-actions, .button, .text-action { display: flex; align-items: center; }
.topbar-row { min-height: 72px; justify-content: space-between; gap: 8px; }
nav { gap: clamp(8px, 2vw, 25px); }
.nav-text, .text-action { font-weight: 650; font-size: .9rem; }
.nav-text:hover, .text-action:hover { color: var(--accent); }
.brand { gap: 8px; font-weight: 850; font-size: 1.38rem; letter-spacing: -.07em; }
.dot { color: var(--accent); }
.button { justify-content: center; gap: 9px; padding: 10px 15px; min-height: 44px; border: 1px solid transparent; border-radius: 8px; font-weight: 750; text-align: center; font-size: .87rem; line-height: 1.25; }
.button:hover:not(:disabled) { filter: brightness(.92); }
.accent { background: var(--accent); color: var(--on-accent); }
.ink { background: var(--solid); color: var(--on-solid); }
.plain, .theme-button { background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
.theme-button { width: 42px; height: 42px; border-radius: 8px; font-size: 1.12rem; line-height: 1; }
.hero { display: grid; gap: 30px; padding-block: clamp(45px, 7vw, 105px); align-items: center; }
.kicker { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 800; font-size: .7rem; letter-spacing: .15em; margin-bottom: 12px; }
.kicker span { width: 7px; height: 7px; background: currentColor; border-radius: 100%; }
.hero h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(3.6rem, 8vw, 7.35rem); line-height: .92; letter-spacing: -.078em; }
.hero h1 em { color: var(--accent); font-weight: 400; }
.desktop-break { display: none; }
.intro { color: var(--muted); font-size: clamp(1rem, 2vw, 1.18rem); margin-top: 24px; max-width: 46ch; }
.hero-actions { gap: 17px; flex-wrap: wrap; margin-top: 24px; }
.text-action { gap: 7px; }
.privacy-line { margin-top: 14px; color: var(--muted); font-size: .82rem; }
.hero-art { position: relative; overflow: hidden; padding: clamp(18px, 4vw, 42px) 12% 12px; background: repeating-linear-gradient(135deg, transparent 0 11px, #82745e14 11px 12px), var(--hero); border: 1px solid var(--hero-line); border-radius: 16px; }
.corner { position: absolute; width: 18px; height: 18px; border: solid var(--hero-line); }
.corner-top { top: 12px; left: 12px; border-width: 1px 0 0 1px; }
.corner-bottom { bottom: 12px; right: 12px; border-width: 0 1px 1px 0; }
.sample-wrap { container-type: inline-size; }
.sample-paper { transform: rotate(-3deg); box-shadow: 15px 18px 34px #2722193d; background: #fffefa; color: #292525; padding: 8%; font-size: clamp(7px, 2.8cqi, 12px); }
.sample-paper header { border-bottom: 2px solid #a14332; padding-bottom: 1.15em; }
.sample-paper h2 { color: #87392e; font: 400 3.3em/.95 Georgia, serif; letter-spacing: -.06em; margin-bottom: .18em; }
.sample-paper header div, .sample-paper section > p, .sample-paper ul { color: #4e4944; }
.sample-paper header div { margin-top: .35em; }
.sample-paper section { margin-top: 1.1em; }
.sample-paper h3 { color: #87392e; font-size: .82em; text-transform: uppercase; letter-spacing: .13em; margin-bottom: .45em; }
.sample-paper ul { padding-left: 1.2em; margin: .3em 0 0; }
.sample-row { display: flex; justify-content: space-between; gap: 7px; }
.sample-row span { text-align: right; }
.art-caption { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 25px; font-size: .63rem; font-weight: 800; letter-spacing: .13em; color: var(--hero-ink); }
.art-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.template-section { background: var(--panel); border-block: 1px solid var(--line); padding-block: clamp(34px, 6vw, 67px); }
.section-intro, .landing-end { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.section-intro h2, .landing-end h2 { font: 400 clamp(2.15rem, 4vw, 3.55rem)/1 Georgia, serif; letter-spacing: -.055em; }
.section-intro > p, .landing-end p { color: var(--muted); max-width: 42ch; }
.template-grid { display: grid; margin-top: 25px; gap: 13px; }
.template-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.template-card:hover { border-color: var(--accent); }
.tile { height: clamp(140px, 19vw, 210px); overflow: hidden; display: grid; place-items: start center; padding-top: 22px; background: var(--tile); }
.editorial-tile { background: color-mix(in srgb, var(--tile) 86%, #b9382a); }
.modern-tile { background: color-mix(in srgb, var(--tile) 80%, #647dae); }
.mini { --mini: #2a3029; width: min(59%, 180px); aspect-ratio: 0.71; box-shadow: 0 9px 18px #22222229; padding: 12%; background: white; }
.editorial-tile .mini { --mini: #a34336; transform: rotate(-3deg); }
.modern-tile .mini { --mini: #294c74; border-top: 15px solid #294c74; transform: rotate(3deg); }
.mini b, .mini i, .mini span { display: block; border-radius: 2px; height: 3px; width: 80%; margin-bottom: 5px; background: #c9c6be; }
.mini b { width: 65%; height: 7px; background: var(--mini); }
.mini i { width: 42%; }
.mini span:nth-child(3n) { width: 62%; }
.mini hr { border: 0; height: 1px; background: var(--mini); margin: 9px 0; }
.tile-label { padding: 13px; display: flex; justify-content: space-between; gap: 9px; }
.tile-label h3 { font-size: 1.03rem; }
.tile-label p { color: var(--muted); margin-top: 3px; font-size: .83rem; }
.tile-label > span { color: var(--accent); }
.landing-end { padding-block: 44px; align-items: center; }
.landing-end p { margin-top: 9px; }
.footer { border-top: 1px solid var(--line); padding-block: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; }
.footer .brand img { width: 25px; height: 25px; }
.builder .topbar { background: var(--panel); }
.workspace { display: grid; gap: 24px; padding-block: 22px 42px; align-items: start; }
.mobile-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.editor, .preview-area { min-width: 0; scroll-margin-top: 14px; }
.editor-head, .preview-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.editor-head h1, .preview-head h2 { font: 400 clamp(1.9rem, 4.2vw, 3.05rem)/1 Georgia, serif; letter-spacing: -.055em; }
.preview-head h2 { font-size: clamp(1.65rem, 4.2vw, 2.45rem); }
.editor-head .button { min-height: 38px; padding: 7px 10px; }
.save-status { color: var(--muted); font-size: .78rem; }
.save-status::before { content: '✓ '; color: var(--accent); }
.save-status[data-error="true"]::before { content: '! '; }
.edit-section { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; margin-bottom: 9px; }
.edit-section > summary { cursor: pointer; font-weight: 750; display: flex; align-items: center; justify-content: space-between; list-style: none; padding: 13px; }
.edit-section > summary::-webkit-details-marker { display: none; }
.edit-section > summary::after { content: '+'; color: var(--accent); }
.edit-section[open] > summary::after { content: '−'; }
.section-fields { border-top: 1px solid var(--line); padding: 12px; display: grid; gap: 10px; }
.field-grid { display: grid; gap: 10px; }
label { display: grid; gap: 5px; color: var(--ink); font-size: .8rem; font-weight: 650; min-width: 0; }
input, textarea, select { min-height: 42px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); color: var(--ink); background: var(--bg); border-radius: 6px; font-size: .94rem; }
input::placeholder, textarea::placeholder { opacity: 1; color: var(--muted); }
textarea { resize: vertical; }
label.wide { grid-column: 1/-1; }
.entry { min-width: 0; margin: 0; border: 1px solid var(--line); padding: 9px; border-radius: 6px; }
.entry legend { font-weight: 700; font-size: .82rem; padding-inline: 4px; }
.entry .remove-entry, .reset-link { margin-top: 8px; padding: 4px 0; border: 0; background: transparent; color: var(--accent); text-decoration: underline; font-size: .83rem; }
.section-fields > .button { justify-self: start; min-height: 38px; }
.export-help, .form-note { color: var(--muted); font-size: .83rem; margin-block: 8px; }
.form-note { color: var(--accent); }
.preview-head select { min-height: 37px; padding: 7px 9px; background: var(--panel); }
.paper-frame { background: var(--paper-bg); border: 1px solid var(--line); padding: clamp(10px, 2.3vw, 27px); border-radius: 12px; container-type: inline-size; }
.resume-paper { --resume-ink: #252a2d; --resume-accent: #303c41; background: #fff; color: var(--resume-ink); box-shadow: 0 4px 16px #201e182b; min-height: calc(100cqi * 1.414); padding: 8%; font-size: clamp(8px, 2.4cqi, 12px); line-height: 1.45; overflow-wrap: anywhere; text-align: start; }
.resume-paper.editorial { --resume-accent: #953d30; }
.resume-paper.modern { --resume-accent: #274d74; }
.resume-paper h1 { font-size: 3em; letter-spacing: -.06em; line-height: 1; }
.resume-paper.editorial h1 { font-family: Georgia, serif; color: var(--resume-accent); font-weight: 400; }
.resume-paper.modern .resume-header { background: #eaf1f8; border-left: .45em solid var(--resume-accent); padding: .8em 1em; }
.resume-header { border-bottom: .15em solid var(--resume-accent); padding-bottom: .7em; break-inside: avoid; }
.resume-title { font-size: 1.3em; margin-top: .25em; font-weight: 650; }
.resume-contact { margin-top: .4em; }
.resume-section { margin-top: 1.1em; }
.resume-section h2 { color: var(--resume-accent); font-size: .94em; letter-spacing: .13em; text-transform: uppercase; border-bottom: 1px solid #d8dbda; padding-bottom: .25em; margin-bottom: .42em; break-after: avoid; }
.resume-section h3 { font-size: 1.04em; line-height: 1.35; margin: 0; }
.resume-section p { line-height: 1.48; white-space: pre-wrap; }
.resume-entry { margin-bottom: .62em; }
.resume-entry-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; break-inside: avoid; break-after: avoid; }
.resume-entry-heading > span { text-align: end; color: #4b5358; flex: 0 1 auto; }
.resume-bullets { padding-inline-start: 1.4em; margin: .32em 0; }
.resume-bullets li { orphans: 2; widows: 2; }
.paper-empty { color: #5c6261; margin-top: 1em; }
dialog { background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 12px; padding: 20px; max-width: min(420px, calc(100% - 28px)); }
dialog::backdrop { background: #19171286; }
dialog p { color: var(--muted); margin-top: 8px; }
.dialog-actions { display: flex; gap: 8px; justify-content: end; margin-top: 16px; }
@media (max-width: 560px) {
  .nav-text { display: none; }
  .topbar-row { min-height: 60px; }
  .save-status { max-width: 89px; font-size: .68rem; }
  .topbar .button { padding-inline: 8px; min-height: 39px; font-size: .78rem; }
  .theme-button { width: 36px; height: 38px; }
}
@media (min-width: 580px) {
  .template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 820px) {
  .wrap { width: min(calc(100% - 70px), 1240px); }
  .hero { grid-template-columns: 1.1fr .9fr; }
  .desktop-break { display: initial; }
  .workspace { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(22px, 4vw, 64px); padding-top: 35px; }
  .mobile-nav { display: none; }
}
@page { size: A4; margin: 16mm; }
@media print {
  html:root, html:root[data-theme] { color-scheme: only light; background: #fff; }
  body { background: #fff; }
  body.builder > :not(main), .workspace > :not(.preview-area), .preview-head, .paper-empty { display: none !important; }
  .workspace, .preview-area, .paper-frame { display: block; width: auto; margin: 0; padding: 0; border: 0; background: transparent; container-type: normal; }
  .resume-paper { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; font-size: 10.5pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .resume-section p { orphans: 2; widows: 2; }
}