/* Readable type, clear controls, and generous resume previews. */
:root {
  --ink: #192a22;
  --muted: #526359;
  --line: #d9e1d5;
  --canvas: #fafbf7;
  font-size: 15px;
  font-weight: 500;
}
body { color: var(--ink); }
svg { stroke-width: 1.8; }
.btn { min-height: 44px; font-size: 14px; font-weight: 700; }
.btn.small, .btn.small:hover { min-height: 38px; font-size: 13px; }
.text-btn { font-size: 13px; font-weight: 700; }
.nav-label { font-size: 11px; font-weight: 700; color: #56694e; letter-spacing: 1.2px; }
.nav-item { font-size: 15px; font-weight: 600; color: #425348; }
.nav-item.active { font-weight: 700; }
.nav-item .count { font-size: 12px; font-weight: 700; }
.sidebar-note h3 { font-size: 16px; line-height: 1.5; }
.sidebar-note p { font-size: 13px; color: #526349; line-height: 1.75; }
.sidebar-footer { font-size: 12px; color: #536448; }
.breadcrumb { font-size: 13px; color: #56645a; }
.breadcrumb strong { color: #253e30; font-weight: 650; }
.subtle-label { font-size: 12px; color: #52664b; font-weight: 600; }
.hero .eyebrow { font-size: 11px; color: #3b6034; letter-spacing: 1.3px; }
.hero h1 { font-weight: 750; }
.hero h1 em { font-weight: 500; }
.hero p { font-size: 16px; color: #485b4e; max-width: 550px; line-height: 1.8; font-weight: 500; }
.hero-note { font-size: 12px; color: #4b6342; font-weight: 600; gap: 15px; }
.hero-note svg { width: 15px; height: 15px; }
.art-label { color: #49613e; font-size: 16px; font-weight: 500; }
.template-toolbar { align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.filter-tabs { gap: 5px; }
.filter-btn { min-height: 42px; padding: 10px 15px; font-size: 13px; color: #40563f; font-weight: 650; }
.filter-btn.active { border-color: #a8b99b; font-weight: 700; box-shadow: 0 2px 4px #25431b08; }
.filter-btn small { font-size: 11px; padding: 2px 6px; color: #36532d; }
.search-wrap { max-width: 235px; }
.search-wrap input { height: 42px; font-size: 13px; padding-left: 35px; color: #243d2a; border-color: #ccd8c3; font-weight: 500; }
.search-wrap svg { top: 13px; width: 16px; height: 16px; color: #617258; }
input::placeholder, textarea::placeholder { color: #687865; opacity: 1; }
.gallery-meta { font-size: 13px; color: #506348; line-height: 1.65; }
.gallery-meta select { font-size: 13px; color: #2e4e30; font-weight: 650; }
.template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
.template-card { background: #fff; border: 1px solid #dae2d4; border-radius: 13px; overflow: hidden; box-shadow: 0 4px 14px #203c1d04; }
.template-visual { border: 0; border-bottom: 1px solid #dae2d4; border-radius: 12px 12px 0 0; aspect-ratio: 1.04; padding: 30px 28px 0; }
.preview-hit { border-radius: 12px 12px 0 0; }
.card-tag { font-size: 11px; padding: 6px 9px; font-weight: 700; color: #36522f; left: 15px; top: 13px; }
.card-tag svg { width: 12px; height: 12px; }
.card-tag.popular { color: #36582a; border-color: #c2d2b0; }
.card-info { margin: 0; padding: 19px 20px 16px; gap: 13px; }
.card-info h2 { font-size: 19px; line-height: 1.4; color: #203a29; font-weight: 750; margin-bottom: 5px; }
.card-info p { font-size: 13px; color: #506348; line-height: 1.7; max-width: none; font-weight: 500; }
.card-swatches { gap: 6px; padding-top: 5px; }
.swatch { width: 15px; height: 15px; min-width: 15px; border: 2px solid white; box-shadow: 0 0 0 1px #cfd9c6; }
.swatch.active:after { inset: -4px; border-width: 1.5px; }
.card-actions { display: flex; gap: 10px; padding: 0 20px 19px; }
.card-actions .btn { flex: 1; min-width: 0; font-size: 13px; min-height: 42px; padding: 10px 12px; white-space: normal; }
.card-actions .btn svg { width: 16px; height: 16px; }
.gallery-footer { font-size: 12px; color: #526648; line-height: 1.7; }
.gallery-footer .made { color: #49613e; font-size: 14px; }
.page-title-row p { font-size: 15px; color: #506348; line-height: 1.7; }
.resume-tile .card-info { padding-bottom: 10px; }
.resume-tile .tile-actions { padding: 0 20px 19px; margin: 0; gap: 7px; }
.resume-tile .tile-actions .btn { font-size: 12px; min-height: 37px; padding: 7px 10px; }
.device-note { font-size: 13px; color: #48613c; padding: 16px 18px; }
.empty-dashboard p { font-size: 15px; color: #506348; max-width: 370px; }
.empty-results p { font-size: 15px; color: #506348; }
.editor-name { font-size: 15px; font-weight: 700; color: #233b2b; }
.saved-state { font-size: 12px; color: #48653c; font-weight: 600; }
.editor-tab { font-size: 14px; color: #4a6040; font-weight: 600; }
.editor-tab.active { font-weight: 700; }
.panel-intro { font-size: 14px; color: #4f6445; line-height: 1.8; }
.example-banner { font-size: 12px; color: #4e633e; padding: 15px; }
.example-banner button { font-size: 12px; }
.accordion > summary { font-size: 14px; font-weight: 700; padding: 17px 15px; }
.accordion > summary svg { color: #4f7141; width: 18px; height: 18px; }
.field { font-size: 13px; font-weight: 650; color: #3e5835; margin-bottom: 17px; }
.field > span { margin-bottom: 8px; }
.field input, .field textarea, .field select { font-size: 14px; font-weight: 500; color: #20351f; border-color: #c6d3bc; padding: 11px 12px; line-height: 1.6; }
.field textarea { min-height: 125px; line-height: 1.8; }
.field small { font-size: 12px; color: #576e49; font-weight: 500; }
.entry-editor-top { font-size: 12px; color: #4a633d; }
.entry-tools button { padding: 5px; color: #4e6b3f; }
.entry-tools svg { width: 16px; height: 16px; }
.add-entry { min-height: 42px; font-size: 13px; font-weight: 650; color: #3c622c; }
.photo-row p { font-size: 11px; color: #566e47; line-height: 1.6; }
.photo-row .text-btn { font-size: 12px; }
.editor-storage { font-size: 12px; color: #556e46; line-height: 1.8; }
.preview-toolbar { max-width: none; font-size: 12px; font-weight: 600; color: #46603a; flex-wrap: wrap; }
.preview-toolbar .preview-tools { gap: 14px; flex-wrap: wrap; }
.preview-area { overflow: auto; }
.preview-tools .text-btn { font-size: 12px; color: #355a29; }
.page-number { font-size: 11px; color: #526b42; font-weight: 600; }
.zoom-control { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #3e5934; font-weight: 600; }
.zoom-control select { min-height: 34px; border: 1px solid #b7c8a9; border-radius: 6px; background: #fff; padding: 5px 8px; color: #27471f; font-size: 12px; font-weight: 650; cursor: pointer; }
.design-heading { font-size: 14px; font-weight: 700; }
.mini-template-choice { height: 108px; }
.mini-template-choice .tiny-name { font-size: 11px; font-weight: 700; color: #35572a; }
.choice { font-size: 13px; color: #415d34; font-weight: 600; }
.choice small { font-size: 11px; color: #536e44; }
.range-row, .range-row output, .section-order-row { font-size: 12px; color: #415d34; font-weight: 600; }
.range-row input { min-width: 0; width: 150px; }
.section-order-row { padding: 13px 0; }
.modal-header h2 { font-size: 21px; font-weight: 750; }
.modal-body { font-size: 14px; color: #475f3a; line-height: 1.8; }
.template-modal-info .eyebrow { font-size: 11px; color: #436b32; }
.template-modal-info h3 { font-weight: 600; }
.template-modal-info p { font-size: 14px; color: #4b633d; }
.template-features { font-size: 13px; color: #456335; }
.preview-modal { width: min(96vw, 1320px); }
.template-modal-content { grid-template-columns: 260px minmax(0, 1fr); }
.template-modal-stage { min-width: 0; background: #edf1e6; }
.modal-preview-toolbar { min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; background: #f4f7ee; border-bottom: 1px solid #d2ddc7; font-size: 12px; font-weight: 600; color: #48633a; }
.template-modal-paper { max-height: calc(88vh - 140px); padding: 25px; }
.guide-step h3 { font-size: 14px; color: #304d24; font-weight: 700; }
.guide-step p { font-size: 13px; color: #4e6640; }
.section-choice span { font-size: 14px; font-weight: 650; }
.section-choice small { font-size: 12px; color: #546d45; line-height: 1.7; }
.export-info { font-size: 13px; color: #3f5c30; }
.stat-pill { font-size: 12px; color: #405f2f; font-weight: 650; }

/* Resume colors remain readable with both light and dark custom accents. */
.resume-sheet { color: #26362c; font-weight: 500; --resume-size: 13.5px; }
.r-name { color: var(--accent-ink, var(--accent)); font-weight: 700; }
.r-title { font-size: 15px; color: #3c5142; font-weight: 600; }
.r-contact { font-size: 11.5px; color: #455b4a; font-weight: 500; }
.r-section-title { color: var(--accent-ink, var(--accent)); font-size: 12px; font-weight: 750; letter-spacing: 1.2px; border-bottom-color: #cad5c8; }
.r-entry-title { color: #1e3326; font-weight: 700; }
.r-entry-meta { color: #455a49; font-size: max(11.5px, calc(var(--resume-size) - 1px)); font-weight: 500; }
.r-dates { color: #465c48; font-size: 11.5px; font-weight: 500; }
.r-text, .r-bullet { color: #2d3e31; font-weight: 500; }
.r-bullet:before { color: var(--accent-ink, var(--accent)); }
.r-chip { font-size: 11.5px; color: var(--accent-ink, var(--accent)); font-weight: 600; }
.r-side-contact .r-text { font-size: 12px; }
.r-side-label { color: #4c624c; font-size: 10px; font-weight: 700; letter-spacing: .8px; }
.r-continue { font-size: 11.5px; color: #4b624a; }
.r-continue strong { color: var(--accent-ink, var(--accent)); }
.r-footer { font-size: 10px; color: #526a4f; font-weight: 500; }
.resume-sheet.two-col .r-aside .r-section-title { font-size: 11px; letter-spacing: .9px; }
.resume-sheet.two-col .r-aside .r-text { font-size: 12px; }
.resume-sheet.two-col .r-aside .r-chip { font-size: 11.5px; }
.resume-sheet.style-willow .r-name,
.resume-sheet.style-classic .r-name,
.resume-sheet.style-editorial .r-name,
.resume-sheet.style-linen .r-name,
.resume-sheet.style-terra .r-name,
.resume-sheet.style-executive .r-name,
.resume-sheet.style-atelier .r-name,
.resume-sheet.style-muse .r-name { font-weight: 600; }
.resume-sheet.style-classic .r-section-title { font-size: 12px; }
.resume-sheet.style-classic .r-title, .resume-sheet.style-editorial .r-title { font-size: 14px; }
.resume-sheet.style-editorial .r-title { color: var(--accent-ink, var(--accent)); }
.resume-sheet.style-editorial .r-section-title { font-size: 12px; }
.resume-sheet.style-linen .r-section-title { font-size: 13px; font-weight: 700; }
.resume-sheet.style-minimal .r-section-title { font-size: 11.5px; font-weight: 750; letter-spacing: 1.4px; }
.resume-sheet.style-minimal .r-entry-title { font-weight: 700; }
.resume-sheet.style-executive .r-section-title { font-weight: 700; }
.resume-sheet.style-atelier .r-section-title { font-weight: 700; }
.resume-sheet.style-blueprint .r-name,
.resume-sheet.style-blueprint .r-title,
.resume-sheet.style-blueprint .r-contact { color: var(--accent-on, #fff); }
.resume-sheet.style-terra .r-aside .r-section-title,
.resume-sheet.style-terra .r-aside .r-text,
.resume-sheet.style-terra .r-aside .r-chip,
.resume-sheet.style-terra .r-aside .r-entry-title,
.resume-sheet.style-terra .r-aside .r-entry-meta,
.resume-sheet.style-terra .r-aside .r-side-label,
.resume-sheet.style-slate .r-aside .r-section-title,
.resume-sheet.style-slate .r-aside .r-text,
.resume-sheet.style-slate .r-aside .r-chip,
.resume-sheet.style-slate .r-aside .r-entry-title,
.resume-sheet.style-slate .r-aside .r-entry-meta,
.resume-sheet.style-slate .r-aside .r-side-label { color: var(--accent-on, #fff); }

@media (min-width: 1600px) {
  .template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .gallery-wrap, .resumes-wrap { padding-left: 26px; padding-right: 26px; }
  .template-grid { gap: 28px 22px; }
  .template-toolbar { align-items: stretch; }
  .search-wrap { max-width: none; width: 100%; }
  .card-info { padding: 17px 16px 14px; }
  .card-info h2 { font-size: 18px; }
  .card-actions { padding: 0 16px 17px; gap: 8px; }
  .card-actions .btn { font-size: 12px; padding: 9px; }
  .field-grid { gap: 0 10px; }
}
@media (max-width: 950px) {
  .topbar-right .subtle-label { display: none; }
  .hero h1 { font-size: 38px; }
  .card-swatches { gap: 4px; }
  .swatch { width: 12px; height: 12px; min-width: 12px; }
  .card-actions { flex-direction: column; }
  .editor-topbar .saved-state { display: none; }
  .editor-name { font-size: 13px; }
}
@media (min-width: 701px) and (max-width: 950px) {
  :root { --sidebar: 205px; }
}
@media (max-width: 900px) {
  .template-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sidebar { width: 255px; }
  .topbar .btn { font-size: 12px; min-height: 38px; padding: 8px 11px; }
  .breadcrumb { font-size: 12px; }
  .gallery-wrap, .resumes-wrap { padding: 29px 18px; }
  .hero h1 { font-size: 36px; }
  .hero .eyebrow { font-size: 10px; line-height: 1.7; letter-spacing: 1px; }
  .hero p { font-size: 15px; line-height: 1.85; }
  .hero-note { flex-wrap: wrap; font-size: 11px; gap: 8px; }
  .filter-tabs { gap: 3px; padding-bottom: 5px; }
  .filter-btn { font-size: 12px; min-height: 41px; padding: 9px 11px; }
  .filter-btn small { font-size: 10px; }
  .gallery-meta { font-size: 12px; align-items: flex-start; gap: 12px; }
  .gallery-meta select { font-size: 12px; max-width: 126px; }
  .template-visual { padding: 29px 23px 0; }
  .card-tag { font-size: 10px; padding: 5px 8px; }
  .card-info h2 { font-size: 18px; }
  .card-info p { font-size: 13px; }
  .card-actions .btn { font-size: 13px; }
  .gallery-footer { font-size: 11px; }
  .gallery-footer .made { font-size: 13px; }
  .editor-topbar { gap: 8px; }
  .editor-name { max-width: 120px; font-size: 12px; }
  .editor-topbar .btn { min-height: 38px; font-size: 12px; padding: 8px 10px; }
  .editor-tab { font-size: 14px; }
  .field input, .field textarea, .field select { font-size: 16px; }
  .preview-mobile-toggle { font-size: 13px; padding: 13px 20px; }
  .template-modal-content { grid-template-columns: 1fr; }
  .template-modal-info { padding: 20px 23px; }
  .template-modal-info h3 { font-size: 27px; }
  .template-modal-info p { font-size: 13px; }
  .template-modal-info .btn { font-size: 12px; }
  .template-modal-paper { max-height: 53vh; padding: 18px; }
  .modal-preview-toolbar { padding: 9px 18px; font-size: 11px; }
  .modal-header h2 { font-size: 19px; }
}
@media (max-width: 560px) {
  .template-grid { grid-template-columns: 1fr; gap: 26px; }
  .template-visual { aspect-ratio: .97; }
  .card-info { padding: 18px 20px 14px; }
  .card-actions { padding: 0 20px 20px; }
  .card-actions { flex-direction: row; }
  .swatch { width: 15px; height: 15px; min-width: 15px; }
  .card-swatches { gap: 7px; }
  .gallery-meta { flex-direction: column; gap: 6px; }
  .field-grid { grid-template-columns: 1fr; }
}