* { -webkit-tap-highlight-color: transparent; }
::selection { background: #1e40af; color: #fff; }
::-moz-selection { background: #1e40af; color: #fff; }

body { max-width: 100%; height: 100% }
.container.outer { display:block; width: 100%; max-width: 800px; margin: 0 auto; padding: 0 15px }
.container.inner { display:block; width: 100%; max-width: 800px; margin: 0 auto 30px; background: #fff; border-radius: 5px; height: auto; min-height: 700px; padding: 20px }
.htu { background: #fff3cd; color: #333; padding: 15px; border-radius: 5px; margin-top: 30px; margin-bottom: 30px; line-height: 150% }

.cv-section { border-bottom: 1px solid #e5e5e5; padding-bottom: 20px; margin-bottom: 20px; }
.cv-section:last-of-type { border-bottom: none; }
.cv-section h3 { margin: 0 0 12px; font-size: 16px; color: #1e40af; }
.cv-section .hint { margin: -6px 0 8px; font-size: 12px; color: #777; }
.cv-section .optional { font-weight: 400; font-size: 12px; color: #888; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.field-grid label { display: flex; flex-direction: column; font-size: 13px; color: #333; gap: 4px; }
.field-grid input, textarea { border: 1px solid #ccc; border-radius: 4px; padding: 8px 10px; font-size: 14px; font-family: inherit; width: 100%; box-sizing: border-box; }
textarea { display:block; margin-top: 4px; }
.cv-section > textarea { width: 100%; }

.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; }
.hidden-field { display: none; }
.is-hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.photo-field { margin-top: 16px; }
.photo-field > label { display: block; font-size: 13px; color: #333; margin-bottom: 6px; }

.photo-dropzone {
    position: relative;
    width: 140px;
    height: 140px;
    border: 2px dashed #b8c2e0;
    border-radius: 8px;
    background: #f5f7fd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.photo-dropzone:hover,
.photo-dropzone:focus-visible { border-color: #1e40af; }
.photo-dropzone.drag-over { border-color: #1e40af; background: #eaf0ff; }

.photo-dropzone-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
}
.photo-dropzone-text { font-size: 11.5px; color: #667; line-height: 140%; }

.photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-remove:hover { background: #c0392b; }

.block { border: 1px solid #ccc; padding: 12px; margin-bottom: 12px; border-radius: 6px; background:#fafafa; }
.block-controls { text-align:right; margin-bottom:10px; }
.btn-small { padding: 2px 6px; margin: 5px 2px; }
.btn-small:hover { padding: 2px 6px; margin: 5px 2px; background: #4caf50}

button { margin: 5px; padding: 10px 10px; }
#addEmployment, #addEducation { background: #1e40af; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
#addEmployment:hover, #addEducation:hover { background: #4caf50; }

.center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
}
.center br { display: none; }
.center button { width: 190px; margin: 0; }
.center button.btn-wide { width: 240px; white-space: nowrap; }

@media (max-width: 600px) {
    .field-grid { grid-template-columns: 1fr; }
    .center { flex-direction: column; align-items: center; }
    .center button { width: 100%; max-width: 320px; }
    .center button.btn-wide { width: 100%; max-width: 320px; white-space: normal; }
}

button#cvPreview:hover, button#cvGenerate:hover, button#cvSaveConfig:hover, button#cvLoadConfig:hover { background: #4caf50 }
button.delete{ background:#fe1818 }

body.scroll-locked { overflow: hidden; }

.pdf-preview-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background-color: rgba(0, 0, 0, 0.75);
}
.pdf-preview-modal {
    position: relative; width: 92vw; height: 92vh; max-width: 900px;
    background-color: #fff; display: flex; flex-direction: column;
    border-radius: 6px; overflow: hidden;
}
.pdf-preview-toolbar { display: flex; justify-content: flex-end; gap: 8px; padding: 8px; background-color: #222; }
.pdf-preview-toolbar button { background: none; border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 10px; width: auto; margin: 0; }
.pdf-preview-toolbar button:hover, .pdf-preview-toolbar button:focus-visible { background: none; color: #ccc; }
.pdf-preview-iframe { flex: 1; width: 100%; border: none; }

#cvFilename { background: #1e40af; color: #fff; border: none; }
#cvFilename::placeholder { color: #fff; opacity: 1; }
#cvFilename::-moz-placeholder { color: #fff; opacity: 1; }

.btn-danger { background: #c0392b; }
.btn-danger:hover { background: #922b21; }
.page-number-toggle { color: #fff; display: inline-flex; align-items: center; gap: 6px; }