:root {
  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  color: #1e292d;
  background: #f3f5f6;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid #91c3ba; outline-offset: 2px; }

.topbar {
  min-height: 70px; background: #fff; border-bottom: 1px solid #e1e6e8;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px max(20px, calc((100vw - 1500px) / 2)); gap: 20px;
  position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; gap: 4px; align-items: center; text-decoration: none; color: #17302d; font-size: 20px; font-weight: 800; letter-spacing: -.7px; white-space: nowrap; }
.brandmark { background: #176b63; color: white; padding: 7px; border-radius: 8px; font-size: 12px; margin-right: 5px; letter-spacing: 0; }
.brand > span:last-child { font-weight: 450; color: #43877f; }
.docname { display: flex; flex-direction: column; flex: 1; max-width: 300px; min-width: 100px; }
.docname input { width: 100%; border: 0; font-size: 13px; font-weight: 650; color: #34434a; padding: 4px; }
.docname small { font-size: 10px; color: #6c8984; padding-left: 4px; }
nav { display: flex; gap: 8px; align-items: center; }
nav button, .toolbar button { background: #fff; border: 1px solid #dce3e5; border-radius: 8px; padding: 9px 12px; font-size: 12px; font-weight: 650; white-space: nowrap; }
nav button:hover, .toolbar button:hover { background: #f5faf8; border-color: #abcac4; }
.primary { background: #176b63 !important; color: #fff !important; border-color: #176b63 !important; }
main { max-width: 1400px; margin: auto; padding: 16px 24px 40px; }
.toolbar { display: flex; align-items: center; gap: 9px; max-width: 210mm; margin: 0 auto 15px; color: #748087; font-size: 12px; }
.toolbar > span { margin-right: auto; }
.toolbar label { font-size: 11px; display: flex; gap: 5px; align-items: center; }
.toolbar input[type="color"] { width: 28px; height: 28px; border: 0; background: none; padding: 0; }
.toolbar #removePhoto[hidden] { display: none; }
#photoStatus { color: #52756e; font-size: 11px; min-width: 1px; }
.stage { display: flex; justify-content: center; align-items: flex-start; overflow: auto; padding: 12px; }
.paper { width: 210mm; min-height: 297mm; padding: 18mm 19mm; background: #fff; box-shadow: 0 8px 32px #26363b20; color: #222; font: 10pt/1.45 Arial, sans-serif; --accent: #176b63; overflow-wrap: anywhere; position: relative; }
.paper.serif { font-family: Georgia, serif; }
.resumehead { margin-bottom: 18px; }
.paper h1 { font-size: 25pt; letter-spacing: -.8px; margin: 0 0 4px; line-height: 1.2; }
.paper .role { font-size: 11pt; color: #666; margin-bottom: 8px; }
.contact { display: flex; gap: 5px 12px; flex-wrap: wrap; color: #555; font-size: 9pt; }
.paper h2 { font-size: 10pt; text-transform: uppercase; letter-spacing: 1px; margin: 17px 0 7px; padding-bottom: 5px; border-bottom: 1px solid #c9cfd0; }
.resume-section { position: relative; }
.editable { outline: 0; white-space: pre-wrap; cursor: text; border-radius: 2px; }
.editable:focus { box-shadow: 0 0 0 2px #66a99d55; background: #f7fcfb; }
.editable:hover { background: #f5f9f8; }
.item { margin: 0 0 11px; break-inside: avoid; page-break-inside: avoid; position: relative; }
.itemhead { display: flex; justify-content: space-between; gap: 18px; }
.itemhead > div { display: flex; flex-direction: column; }
.itemhead strong { font-size: 10pt; }
.sub, .period { color: #555; font-size: 9pt; }
.itemtext { font-size: 9.5pt; white-space: pre-wrap; margin-top: 4px; }
.sectiontools, .itemtools { position: absolute; right: 0; top: -6px; display: flex; gap: 3px; opacity: 0; transition: opacity .15s; z-index: 2; }
.sectiontools button, .itemtools button { border: 1px solid #dce7e4; background: #fff; color: #39766d; border-radius: 5px; font-size: 10px; padding: 4px 6px; white-space: nowrap; }
.resume-section:hover > .sectiontools, .resume-section:focus-within > .sectiontools, .item:hover .itemtools, .item:focus-within .itemtools { opacity: 1; }
.itemtools { top: 0; right: 0; }
.addpaper { margin-top: 18px; background: #f4faf8; border: 1px dashed #94c5bb; border-radius: 7px; color: #28776b; padding: 8px 12px; font-size: 11px; opacity: 0; }
.paper:hover .addpaper, .addpaper:focus { opacity: 1; }

.template-drawer { max-width: 210mm; margin: 0 auto; display: none; grid-template-columns: repeat(8, 1fr); gap: 8px; padding: 0 0 12px; }
.template-drawer.open { display: grid; }
.template { border: 1px solid #e0e5e6; border-radius: 7px; background: #fff; padding: 6px 3px; font-size: 10px; display: flex; align-items: center; flex-direction: column; gap: 4px; }
.template.active { border: 2px solid #176b63; color: #176b63; }
.mini { width: 35px; height: 43px; border: 1px solid #d6dcdd; background: #fff; display: flex; flex-direction: column; gap: 4px; padding: 5px; }
.mini i { height: 2px; background: #acb7b9; }
.mini i:first-child { height: 5px; background: var(--accent, #176b63); }
.mini.harvard { align-items: center; }
.mini.creative { border-left: 4px solid #8051a8; }
.mini.executive { background: #253238; }
.mini.executive i { background: #e6e6e6; }
.paper.modern { border-top: 10px solid var(--accent); }
.paper.modern h1, .paper.modern h2 { color: var(--accent); }
.paper.harvard { padding-left: 22mm; padding-right: 22mm; font-family: Georgia, serif; }
.paper.harvard .resumehead { text-align: center; border-bottom: 1px solid #222; padding-bottom: 13px; }
.paper.harvard h1 { font-size: 23pt; }
.paper.harvard h2 { border-color: #222; }
.paper.ats { font-family: Arial, sans-serif; }
.paper.ats h1 { font-size: 22pt; }
.paper.ats h2 { letter-spacing: 0; border-bottom: 1px solid #222; }
.paper.creative { border-left: 13px solid #8051a8; --accent: #8051a8; }
.paper.creative h1 { color: var(--accent); font-size: 29pt; }
.paper.creative h2 { border-bottom: 2px solid var(--accent); }
.paper.firstjob { --accent: #258575; }
.paper.firstjob .resumehead { background: #f0f7f6; padding: 15px; margin: -18mm -19mm 20px; }
.paper.executive { --accent: #ae935d; font-family: Georgia, serif; }
.paper.executive .resumehead { background: #253238; color: white; padding: 22px; margin: -18mm -19mm 22px; }
.paper.executive .role, .paper.executive .contact { color: #dce5e3; }
.paper.executive h2 { color: var(--accent); }
.paper.international { --accent: #3b658a; }
.paper.international h2 { color: var(--accent); border-bottom: 2px solid var(--accent); }
.paper.international .resumehead { border-left: 5px solid var(--accent); padding-left: 13px; }
.paper.simple h1 { font-size: 22pt; }
.paper.simple h2 { background: #f0f2f3; padding: 5px 7px; border: 0; letter-spacing: 0; }

.menu { position: fixed; z-index: 10; top: 115px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #dae2e3; box-shadow: 0 8px 24px #132b3020; border-radius: 10px; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: min(420px, 95vw); }
.menu button { background: #fff; border: 0; border-radius: 6px; text-align: left; padding: 10px; font-size: 12px; }
.menu button:hover { background: #eff7f5; }
.hidden { display: none !important; }
footer { text-align: center; color: #879294; font-size: 11px; padding: 18px; }
.profile-photo { float: right; width: 92px; height: 112px; object-fit: cover; border-radius: 6px; margin: 0 0 10px 14px; border: 1px solid #dce3e5; }
.paper.harvard .profile-photo { border-radius: 50%; width: 86px; height: 86px; }
.paper.executive .profile-photo { border: 2px solid #ffffff88; }
.resumehead.has-photo { min-height: 112px; }
.resume-section.page-break-before { break-before: page; page-break-before: always; }

@media screen and (max-width: 1000px) {
  .topbar { height: auto; min-height: 64px; flex-wrap: wrap; padding: 10px 16px; gap: 8px 14px; }
  .docname { max-width: 220px; }
  nav { flex-wrap: wrap; justify-content: flex-end; }
  main { padding-left: 12px; padding-right: 12px; }
  .toolbar { max-width: 100%; flex-wrap: wrap; }
  .toolbar > span { flex: 1 1 100%; }
  .stage { padding: 8px 0; }
  .paper { width: min(100%, 210mm); min-height: 0; }
  .itemhead { flex-wrap: wrap; gap: 3px 12px; }
  .itemhead > div { flex: 1 1 65%; min-width: 0; }
  .period { flex: 0 0 auto; white-space: nowrap; margin-left: auto; }
  .sectiontools, .itemtools { flex-wrap: wrap; }
}
@media screen and (max-width: 640px) {
  .topbar { position: sticky; padding: 8px 10px; }
  .brand { font-size: 17px; }
  .docname { display: none; }
  nav { flex: 1 1 100%; justify-content: space-between; gap: 4px; }
  nav button { padding: 8px 7px; font-size: 11px; }
  main { padding: 8px 8px 24px; }
  .toolbar { gap: 6px; padding: 0; }
  .toolbar button { padding: 8px; font-size: 11px; }
  .stage { display: block; padding: 0; overflow: visible; }
  .paper { width: 100%; padding: 26px 22px; font-size: 9.5pt; }
  .paper h1 { font-size: clamp(22pt, 7vw, 25pt); overflow-wrap: anywhere; }
  .paper h2 { font-size: 9.5pt; }
  .paper.harvard { padding-left: 22px; padding-right: 22px; }
  .paper.firstjob .resumehead, .paper.executive .resumehead { margin: -26px -22px 20px; }
  .paper.executive .resumehead { padding: 20px 22px; }
  .contact { gap: 5px 10px; }
  .itemhead > div { flex-basis: 100%; }
  .period { margin-left: 0; }
  .sectiontools, .itemtools { opacity: 1; position: static; justify-content: flex-start; margin: 5px 0 8px; }
  .sectiontools button, .itemtools button { min-height: 32px; font-size: 11px; }
  .menu { top: auto; bottom: 12px; left: 12px; right: 12px; transform: none; width: auto; max-height: min(60vh, 440px); overflow-y: auto; grid-template-columns: 1fr 1fr; }
  .resume-section.page-break-before { margin-top: 30px; padding-top: 16px; border-top: 1px dashed #91aaa6; }
}
@media screen {
  .resume-section.page-break-before { margin-top: 30px; padding-top: 16px; border-top: 1px dashed #91aaa6; }
  .resume-section.page-break-before::before { content: "Continuação em nova página"; display: block; color: #64817c; font-size: 10px; margin-bottom: 6px; }
}
@media screen {
  body.preview-mode { background: #e9edf0; }
  body.preview-mode .topbar { box-shadow: 0 2px 10px #26363b12; }
  body.preview-mode nav #undo,
  body.preview-mode nav #redo,
  body.preview-mode nav #templateToggle,
  body.preview-mode nav #customize { display: none; }
  body.preview-mode main > .toolbar,
  body.preview-mode .template-drawer,
  body.preview-mode footer,
  body.preview-mode .sectiontools,
  body.preview-mode .itemtools,
  body.preview-mode .addpaper,
  body.preview-mode #menu { display: none !important; }
  body.preview-mode main { padding-top: 24px; }
  body.preview-mode .stage { overflow: visible; }
  body.preview-mode .paper { box-shadow: 0 8px 34px #1d30351f; }
  body.preview-mode [contenteditable="true"] { pointer-events: none; cursor: default; }
  body.preview-mode .resume-section.page-break-before::before { display: none; }
  body.preview-mode .editable:hover,
  body.preview-mode .editable:focus { background: transparent; box-shadow: none; }
}

@page { size: A4 portrait; margin: 0; }
@media print {
  html, body { width: 210mm !important; min-width: 210mm !important; margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
  main { display: block !important; width: 210mm !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .stage { display: block !important; width: 210mm !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  .paper { box-sizing: border-box !important; width: 210mm !important; min-height: 297mm !important; margin: 0 !important; padding: 18mm 19mm !important; overflow: visible !important; box-shadow: none !important; transform: none !important; }
  .paper.harvard { padding-left: 22mm !important; padding-right: 22mm !important; }
  .paper, .paper * { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; }
  .paper h1, .paper h2, .resumehead, .itemhead { break-after: avoid-page; page-break-after: avoid; }
  .item { break-inside: avoid-page; page-break-inside: avoid; }
  .resume-section.page-break-before { break-before: page !important; page-break-before: always !important; }
  .itemtext { orphans: 3; widows: 3; }
}

/* Download review screen */
.download-view[hidden] { display: none !important; }
.download-view { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: #edf0f2; overflow: auto; }
.download-header { min-height: 76px; padding: 12px clamp(14px, 4vw, 48px); display: flex; align-items: center; gap: 20px; background: #fff; border-bottom: 1px solid #dfe5e7; box-shadow: 0 2px 10px #1d30350a; }
.download-header > div { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.download-header strong { font-size: 15px; color: #26383a; }
.download-header span { font-size: 12px; color: #748087; }
.download-header button { border: 1px solid #dce3e5; background: #fff; border-radius: 9px; padding: 11px 15px; font-size: 13px; font-weight: 650; white-space: nowrap; }
.download-header button.primary { background: #176b63; color: #fff; }
.download-stage { flex: 1; min-height: 0; overflow: auto; padding: 28px 16px 48px; display: flex; align-items: flex-start; justify-content: center; }
.download-paper { flex: 0 0 auto; }
body.download-mode { overflow: hidden; }
body.download-mode > .topbar, body.download-mode > main, body.download-mode > footer, body.download-mode > #menu { display: none !important; }
body.download-mode .download-paper .resume-section.page-break-before::before { display: none; }
.template-drawer { max-width: 1000px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; padding: 12px 0 18px; }
.template { min-width: 0; padding: 10px; gap: 8px; text-align: center; color: #34464b; transition: transform .15s, box-shadow .15s, border-color .15s; }
.template:hover { transform: translateY(-2px); box-shadow: 0 5px 16px #26363b14; border-color: #9dbdb7; }
.template.active { border: 2px solid #176b63; background: #f4faf8; padding: 9px; }
.template-preview { width: 100%; height: 112px; padding: 12px 13px; display: flex; flex-direction: column; gap: 5px; background: #fff; border: 1px solid #e2e7e9; box-shadow: 0 2px 7px #26363b0c; overflow: hidden; }
.template-preview i { display: block; flex: 0 0 3px; background: #c9d0d2; border-radius: 2px; }
.template-preview .mock-head { height: 20px; flex-basis: 20px; display: flex; flex-direction: column; gap: 4px; background: transparent; border-radius: 0; border-bottom: 1px solid #e2e7e9; padding-bottom: 4px; }
.mock-head b { display: block; width: 56%; height: 5px; background: #293c40; border-radius: 2px; }
.mock-head b + b { width: 38%; height: 3px; background: #9ca9ab; }
.template-preview .mock-section { width: 48%; margin-top: 3px; background: var(--preview-accent, #176b63); }
.template-preview .mock-line.long { width: 100%; }
.template-preview .mock-line { width: 78%; }
.template-preview .mock-line.short { width: 48%; }
.template-preview .mock-entry { width: 64%; background: #657477; margin-top: 2px; }
.template-preview.harvard { --preview-accent: #333; font-family: Georgia, serif; }
.template-preview.harvard .mock-head { align-items: center; }
.template-preview.modern { border-top: 4px solid #176b63; --preview-accent: #176b63; }
.template-preview.ats { --preview-accent: #333; border-radius: 0; box-shadow: none; }
.template-preview.ats i { border-radius: 0; }
.template-preview.creative { --preview-accent: #8051a8; border-left: 5px solid #8051a8; }
.template-preview.creative .mock-head b:first-child { background: #8051a8; }
.template-preview.firstjob { --preview-accent: #258575; }
.template-preview.firstjob .mock-head { background: #eef7f5; }
.template-preview.executive { --preview-accent: #ae935d; }
.template-preview.executive .mock-head { background: #253238; }
.template-preview.executive .mock-head b { background: #fff; }
.template-preview.international { --preview-accent: #3b658a; border-left: 4px solid #3b658a; }
.template-preview.simple { --preview-accent: #657477; }
.template-preview.simple .mock-section { height: 7px; flex-basis: 7px; background: #edf0f1; }
.template-name { font-size: 11px; font-weight: 700; line-height: 1.25; }
.template-choice { font-size: 10px; color: #73837f; }
@media screen and (max-width: 640px) {
  .download-header { min-height: 66px; gap: 8px; padding: 8px 10px; }
  .download-header strong { font-size: 13px; }
  .download-header span { font-size: 10px; }
  .download-header button { padding: 9px 8px; font-size: 11px; }
  .download-stage { padding: 14px 8px 24px; }
  .download-paper { width: min(210mm, calc(100vw - 16px)); min-height: 0 !important; padding: 26px 22px !important; }
  .download-paper.harvard { padding-left: 22px !important; padding-right: 22px !important; }
}
@media print { .download-view { display: none !important; } }