:root { --primary: #2563eb; }

.brand-badge {
    width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.hero { background: linear-gradient(180deg, #eef2ff 0%, #ffffff 100%); }
.feature-icon {
    width: 44px; height: 44px; border-radius: 10px; background: #eef2ff; color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.admin-sidebar { width: 240px; }

/* Resume preview (screen) ------------------------------------------------ */
.resume-sheet { background: #fff; width: 210mm; min-height: 297mm; box-shadow: 0 1px 6px rgba(0,0,0,.15); margin: 0 auto; font-size: 12px; color: #1f2937; }
.resume-flex { display: flex; min-height: 100%; }
.resume-side { width: 34%; padding: 24px; color: #fff; }
.resume-main { width: 66%; padding: 24px; }
.resume-pad { padding: 32px; }
.resume-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; border: 2px solid rgba(255,255,255,.4); }
.resume-name { font-size: 22px; font-weight: 800; line-height: 1.2; margin: 0; }
.resume-name-plain { font-size: 26px; font-weight: 800; color: #111827; margin: 0; }
.resume-title-side { font-size: 14px; color: rgba(255,255,255,.8); margin-bottom: 16px; }
.resume-title-plain { font-size: 14px; font-weight: 500; margin: 2px 0 0; }
.resume-contact-side { font-size: 10.5px; color: rgba(255,255,255,.85); margin-bottom: 2px; word-break: break-word; }
.resume-contact-plain { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10.5px; color: #6b7280; margin-top: 4px; }
.resume-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid; }
.resume-section { margin-bottom: 16px; }
.resume-section h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid; }
.resume-item-title { font-size: 12px; font-weight: 600; color: #111827; }
.resume-item-date { font-size: 10px; color: #6b7280; }
.resume-item-sub { font-size: 11px; color: #4b5563; }
.resume-body { font-size: 10.5px; color: var(--text-color, #374151); margin-top: 2px; white-space: pre-wrap; }
.cert-item { display: flex; align-items: center; gap: 8px; }
.text-white-side { color: rgba(255,255,255,.9) !important; }

/* Dark mode ---------------------------------------------------------------- */
body[data-theme="dark"] {
    background-color: #0f1115;
    color: #e5e7eb;
}
body[data-theme="dark"] .navbar,
body[data-theme="dark"] footer,
body[data-theme="dark"] .card,
body[data-theme="dark"] .modal-content,
body[data-theme="dark"] .builder-nav {
    background-color: #171923 !important;
    color: #e5e7eb;
    border-color: #2d2f3a !important;
}
body[data-theme="dark"] .text-muted { color: #9ca3af !important; }
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select {
    background-color: #1f2230;
    color: #e5e7eb;
    border-color: #2d2f3a;
}
body[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form-select:focus {
    background-color: #1f2230;
    color: #e5e7eb;
}
body[data-theme="dark"] .btn-light,
body[data-theme="dark"] .btn-outline-secondary { color: #e5e7eb; border-color: #3a3d4a; }
body[data-theme="dark"] .preview-wrap { background: #05060a; border-color: #2d2f3a; }
body[data-theme="dark"] .repeater-item { border-color: #2d2f3a; }
body[data-theme="dark"] .step-pill.btn-outline-secondary { color: #e5e7eb; border-color: #3a3d4a; }
/* The resume sheet itself always stays print-white regardless of app theme */
body[data-theme="dark"] .resume-sheet { background: #fff; color: #1f2937; }

/* Drag & drop -------------------------------------------------------------- */
.drag-handle { cursor: grab; color: #9ca3af; }
.drag-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: .4; }
.sortable-drag { box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.section-order-item, .page-item { display: flex; align-items: center; gap: 10px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
body[data-theme="dark"] .section-order-item, body[data-theme="dark"] .page-item { background: #1f2230; border-color: #2d2f3a; }

/* Photo cropper modal ------------------------------------------------------ */
.cropper-frame { max-height: 60vh; overflow: hidden; }
.cropper-frame img { max-width: 100%; display: block; }
.cert-photo-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }