/* Preview kağıdı için arka plan değişkeni */

/**
 * CV Builder Engine — Admin Editor Stylesheet v2
 *
 * App-shell layout: full-viewport SPA-style editor with
 *   • Fixed topbar
 *   • 380 px left panel with tabs
 *   • Right live-preview panel
 *
 * All selectors are scoped to .cvb-editor-app or
 * WordPress admin IDs to avoid conflicts with WP core styles.
 *
 * @package CVBuilderEngine
 */

/* ─────────────────────────────────────────────────────────────
   1. App Shell
   ───────────────────────────────────────────────────────────── */

.cvb-editor-app {
	display        : flex;
	flex-direction : column;
	height         : calc( 100vh - 32px ); /* subtract WP admin bar */
	overflow       : hidden;
	background     : #f0f0f1;
	font-family    : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   2. Topbar
   ───────────────────────────────────────────────────────────── */

.cvb-topbar {
	display         : flex;
	align-items     : center;
	gap             : 12px;
	height          : 52px;
	padding         : 0 20px;
	background      : #fff;
	border-bottom   : 1px solid #dcdcde;
	box-shadow      : 0 1px 4px rgba(0,0,0,.08);
	flex-shrink     : 0;
	z-index         : 10;
}

.cvb-topbar__brand {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #1d2327;
}

.cvb-topbar__resume-switch {
	min-width: 220px;
}

.cvb-topbar__resume-switch .cvb-input {
	height: 32px;
	padding-top: 4px;
	padding-bottom: 4px;
}

.cvb-topbar__status {
	margin-left: auto;
	margin-right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #787c82;
}

.cvb-topbar__actions {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.cvb-topbar__lang {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.cvb-topbar__lang-select {
	font-size: 0.8125rem;
	height: 28px;
	padding: 0 4px;
	border-radius: 4px;
}

.cvb-inline-form {
	display: inline-flex;
	margin: 0;
}

.cvb-brand {
	font-size   : 15px;
	font-weight : 600;
	color       : #1d2327;
	margin-right: 8px;
}

.cvb-topbar-status {
	display     : flex;
	align-items : center;
	gap         : 6px;
	font-size   : 12px;
	color       : #787c82;
	flex        : 1;
}

/* Spinner (shared between topbar and preview) */
.cvb-spinner {
	width         : 16px;
	height        : 16px;
	border        : 2px solid #dcdcde;
	border-top    : 2px solid #2271b1;
	border-radius : 50%;
	display       : inline-block;
	opacity       : 0;
	transition    : opacity .15s;
}
.cvb-spinner.is-active { opacity: 1; animation: cvb-spin .7s linear infinite; }

@keyframes cvb-spin { to { transform: rotate(360deg); } }

.cvb-topbar-actions { display: flex; gap: 8px; margin-left: auto; }

/* ─────────────────────────────────────────────────────────────
   3. Editor body
   ───────────────────────────────────────────────────────────── */

.cvb-editor-body {
	display  : flex;
	flex     : 1;
	overflow : hidden;
}

/* ─────────────────────────────────────────────────────────────
   4. Left panel
   ───────────────────────────────────────────────────────────── */

.cvb-editor-panel {
	display        : flex;
	flex-direction : column;
	width          : 30%;
	flex-shrink    : 0;
	background     : #fff;
	border-right   : 1px solid #dcdcde;
	overflow       : hidden;
}

/* ─────────────────────────────────────────────────────────────
   5. Tabs
   ───────────────────────────────────────────────────────────── */

.cvb-tabs {
	display       : flex;
	border-bottom : 2px solid #dcdcde;
	background    : #f6f7f7;
	flex-shrink   : 0;
}

.cvb-tab {
	flex         : 1;
	padding      : 10px 4px;
	border       : none;
	background   : none;
	cursor       : pointer;
	font-size    : 12px;
	font-weight  : 500;
	color        : #50575e;
	text-align   : center;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition   : color .15s, border-color .15s;
}
.cvb-tab:hover { color: #2271b1; }
.cvb-tab.is-active { color: #2271b1; border-bottom-color: #2271b1; background: #fff; }

.cvb-tab-pane { display: none; flex: 1; overflow: hidden; }
.cvb-tab-pane.is-active { display: flex; flex-direction: column; }

.cvb-pane-inner { flex: 1; overflow-y: auto; padding: 16px; }

.cvb-fg { margin-bottom: 12px; }
.cvb-fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Photo picker ────────────────────────────────────────────── */
.cvb-photo-picker {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	border: 2px dashed #c3c4c7;
	border-radius: 10px;
	padding: 18px 14px;
	cursor: pointer;
	transition: border-color .2s, background .2s;
	text-align: center;
}
.cvb-photo-picker:hover,
.cvb-photo-picker.drag-over {
	border-color: #2271b1;
	background: #f0f6fc;
}
.cvb-photo-picker.has-photo { border-style: solid; border-color: #2271b1; }
.cvb-photo-ring {
	width: 76px; height: 76px;
	border-radius: 50%;
	overflow: hidden;
	background: #f0f0f1;
	border: 2px solid #c3c4c7;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: border-color .2s;
	flex-shrink: 0;
}
.cvb-photo-picker.has-photo .cvb-photo-ring { border-color: #2271b1; }
.cvb-photo-ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvb-photo-placeholder-icon { width: 32px; height: 32px; color: #8c8f94; }
.cvb-photo-picker-info p { font-size: 12px; color: #50575e; margin: 0; line-height: 1.4; }
.cvb-photo-hint { color: #8c8f94 !important; font-size: 11px !important; }
.cvb-photo-picker-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cvb-label { font-size: 12px; font-weight: 600; color: #1d2327; display: block; margin-bottom: 4px; }
.cvb-hint { font-size: 12px; color: #646970; margin-bottom: 10px; }
.cvb-export-hint { margin-bottom: 14px; }

.cvb-theme-quick-actions {
	margin-top: 8px;
}

.cvb-font-preview {
	margin-top: 8px;
	padding: 8px 10px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #f6f7f7;
}

.cvb-font-preview__label {
	font-size: 11px;
	color: #646970;
	margin-bottom: 4px;
}

.cvb-font-preview__sample {
	font-size: 15px;
	line-height: 1.35;
	color: #1d2327;
}

/* ─────────────────────────────────────────────────────────────
   6. Add-section bar
   ───────────────────────────────────────────────────────────── */

.cvb-add-bar {
	display     : flex;
	flex-wrap   : wrap;
	gap         : 8px;
	padding     : 12px 16px;
	border-bottom: 1px solid #f0f0f1;
}

.cvb-chip {
	display      : inline-flex;
	align-items  : center;
	gap          : 5px;
	padding      : 5px 12px;
	border-radius: 20px;
	border       : 1px solid #2271b1;
	background   : #fff;
	color        : #2271b1;
	font-size    : 12px;
	font-weight  : 500;
	cursor       : pointer;
	transition   : background .15s, color .15s;
}
.cvb-chip:hover { background: #2271b1; color: #fff; }
.cvb-chip.is-disabled,
.cvb-chip:disabled {
	border-color : #dcdcde;
	color        : #a7aaad;
	cursor       : not-allowed;
	background   : #f6f7f7;
}
.cvb-chip .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 14px; }

/* drag hint text */
.cvb-drag-hint {
	font-size  : 11px;
	color      : #a7aaad;
	padding    : 8px 16px 0;
	font-style : italic;
}

/* empty state */
.cvb-sections-empty {
	padding    : 32px 16px;
	text-align : center;
	color      : #a7aaad;
}
.cvb-sections-empty .dashicons { font-size: 36px; width: 36px; height: 36px; display: block; margin: 0 auto 8px; }

/* ─────────────────────────────────────────────────────────────
   7. Section cards
   ───────────────────────────────────────────────────────────── */

#cvb-sections-list { padding: 8px 12px; }

.cvb-section-card {
	background    : #fff;
	border        : 1px solid #dcdcde;
	border-left   : 4px solid #dcdcde;
	border-radius : 4px;
	margin-bottom : 8px;
	transition    : box-shadow .15s;
}
.cvb-section-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* Type-specific accent colors */
.cvb-section-card[data-section-type="experience"] { border-left-color: #2563EB; }
.cvb-section-card[data-section-type="education"]  { border-left-color: #7C3AED; }
.cvb-section-card[data-section-type="skills"]     { border-left-color: #059669; }
.cvb-section-card[data-section-type="contact"]    { border-left-color: #DC2626; }

/* Card header */
.cvb-section-card__hd {
	display     : flex;
	align-items : center;
	gap         : 8px;
	padding     : 10px 12px;
	cursor      : pointer;
	user-select : none;
}

.cvb-drag-handle {
	cursor      : grab;
	color       : #c3c4c7;
	flex-shrink : 0;
	font-size   : 18px;
	width       : 18px;
	height      : 18px;
	line-height : 18px;
}
.cvb-drag-handle:hover { color: #787c82; }
.ui-sortable-helper .cvb-drag-handle { cursor: grabbing; }

.cvb-section-card__label {
	flex        : 1;
	font-size   : 13px;
	font-weight : 600;
	color       : #1d2327;
}

.cvb-count {
	font-size     : 11px;
	background    : #f0f0f1;
	color         : #50575e;
	padding       : 1px 6px;
	border-radius : 10px;
}

/* Card toggle and delete buttons */
.cvb-card-rename,
.cvb-card-visibility,
.cvb-card-toggle,
.cvb-card-delete {
	background  : none;
	border      : none;
	cursor      : pointer;
	padding     : 0;
	color       : #a7aaad;
	font-size   : 16px;
	width       : 20px;
	height      : 20px;
	line-height : 20px;
	flex-shrink : 0;
	transition  : color .15s;
}
.cvb-card-rename:hover    { color: #6c5ce7; }
.cvb-card-visibility:hover { color: #2271b1; }
.cvb-card-toggle:hover { color: #2271b1; }

/* Inline section title edit input */
.cvb-card-rename-input {
	flex        : 1;
	font-size   : 13px;
	font-weight : 600;
	color       : #1d2327;
	border      : 1px solid #6c5ce7;
	border-radius: 3px;
	padding     : 1px 6px;
	outline     : none;
	min-width   : 60px;
	max-width   : 200px;
	box-shadow  : 0 0 0 2px rgba(108,92,231,.15);
}
.cvb-card-delete:hover  { color: #d63638; }

.cvb-section-card.is-section-hidden .cvb-section-card__label,
.cvb-section-card.is-section-hidden .cvb-count {
	opacity: .55;
}

.cvb-card-toggle  { transform: rotate(0);   transition: transform .2s, color .15s; }
.cvb-section-card.is-open .cvb-card-toggle { transform: rotate(180deg); }

/* Card body (items) — hidden by default */
.cvb-section-card__body {
	display    : none;
	padding    : 0 12px 12px;
	border-top : 1px solid #f0f0f1;
}
.cvb-section-card.is-open .cvb-section-card__body { display: block; }

/* 💡 Tip icon button in card header */
.cvb-card-tip {
	background   : none;
	border       : none;
	padding      : 0 3px;
	font-size    : 14px;
	cursor       : pointer;
	line-height  : 1;
	opacity      : 0.8;
	transition   : opacity .15s, transform .15s;
	border-radius: 3px;
}
.cvb-card-tip:hover {
	opacity  : 1;
	transform: scale(1.15);
}
.cvb-card-tip.is-active {
	outline : 2px solid #f0c040;
}

/* Closeable tip alert box inside card body */
.cvb-tip-alert {
	display      : flex;
	align-items  : flex-start;
	gap          : 8px;
	margin       : 10px 0 8px;
	padding      : 8px 12px;
	font-size    : 12px;
	line-height  : 1.5;
	color        : #5c4d00;
	background   : #fffbeb;
	border       : 1px solid #f0c040;
	border-radius: 4px;
	word-break   : break-word;
}
.cvb-tip-alert__text {
	flex: 1;
}
.cvb-tip-alert__close {
	flex-shrink  : 0;
	background   : none;
	border       : none;
	cursor       : pointer;
	font-size    : 16px;
	line-height  : 1;
	padding      : 0;
	color        : #999;
	transition   : color .15s;
}
.cvb-tip-alert__close:hover { color: #333; }

/* Disabled sub-buttons in Custom Section until a section title is typed */
.cvb-btn-add-record-to-section:disabled,
.cvb-btn-add-skill-to-section:disabled {
	opacity: 0.4;
	cursor : not-allowed;
}

/* Flash animation when a card is newly added */
@keyframes cvb-flash {
	0%   { box-shadow: 0 0 0 3px rgba(34, 113, 177, .5); }
	100% { box-shadow: none; }
}
.cvb-card--flash { animation: cvb-flash .8s ease-out; }

/* Sortable placeholder */
.cvb-sortable-placeholder {
	background    : #f0f6ff;
	border        : 2px dashed #2271b1;
	border-radius : 4px;
	margin-bottom : 8px;
	opacity       : .6;
}

/* ─────────────────────────────────────────────────────────────
   8. Item rows & field grid
   ───────────────────────────────────────────────────────────── */

.cvb-item-row {
	display     : flex;
	align-items : flex-start;
	gap         : 8px;
	padding     : 10px 0;
	border-bottom: 1px solid #f0f0f1;
}
.cvb-item-row:last-child { border-bottom: none; }

.cvb-item-fields {
	flex        : 1;
	display     : flex;
	flex-wrap   : wrap;
	gap         : 8px;
}

.cvb-field-cell { display: flex; flex-direction: column; gap: 3px; }
.cvb-fc--half   { width: calc( 50% - 4px ); min-width: 110px; flex-shrink: 0; }
.cvb-fc--full   { width: 100%; }

.cvb-item-label {
	font-size   : 11px;
	font-weight : 500;
	color       : #646970;
	white-space : nowrap;
}

/* Generic input reset */
.cvb-input,
.cvb-textarea {
	width         : 100%;
	padding       : 5px 8px;
	font-size     : 12px;
	line-height   : 1.5;
	border        : 1px solid #dcdcde;
	border-radius : 3px;
	background    : #fff;
	color         : #1d2327;
	box-sizing    : border-box;
	transition    : border-color .15s, box-shadow .15s;
}
.cvb-input:focus,
.cvb-textarea:focus {
	border-color : #2271b1;
	box-shadow   : 0 0 0 2px rgba(34,113,177,.2);
	outline      : none;
}

select.cvb-input { cursor: pointer; }

textarea.cvb-input { resize: vertical; }

/* Remove-item button */
.cvb-btn-rm-item {
	background  : none;
	border      : none;
	cursor      : pointer;
	padding     : 5px 0 0;
	color       : #c3c4c7;
	font-size   : 18px;
	width       : 20px;
	height      : 20px;
	line-height : 18px;
	flex-shrink : 0;
	transition  : color .15s;
}
.cvb-btn-rm-item:hover { color: #d63638; }

/* Add entry button */
.cvb-btn-add-item {
	display      : inline-flex;
	align-items  : center;
	gap          : 4px;
	margin-top   : 10px;
	padding      : 5px 10px;
	font-size    : 12px;
	border       : 1px dashed #a7aaad;
	border-radius: 3px;
	background   : none;
	color        : #50575e;
	cursor       : pointer;
	transition   : border-color .15s, color .15s, background .15s;
}
.cvb-btn-add-item:hover {
	border-color : #2271b1;
	color        : #2271b1;
	background   : #f0f6ff;
}
.cvb-btn-add-item .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 14px; }

/* Özel Bölüm — iki ekleme butonu */
.cvb-add-btns {
	display   : flex;
	gap       : 8px;
	flex-wrap : wrap;
	margin-top: 10px;
}
.cvb-btn-add-section-title {
	display      : inline-flex;
	align-items  : center;
	gap          : 4px;
	padding      : 5px 10px;
	font-size    : 12px;
	border       : 1px dashed #8b5cf6;
	border-radius: 3px;
	background   : none;
	color        : #6d28d9;
	cursor       : pointer;
	transition   : border-color .15s, color .15s, background .15s;
}
.cvb-btn-add-section-title:hover {
	border-color : #6d28d9;
	background   : #f5f3ff;
}
.cvb-btn-add-section-title .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 14px; }

/* Özel Bölüm — bölüm içine kayıt ekle butonu */
.cvb-btn-add-record-to-section {
	display      : inline-flex;
	align-items  : center;
	gap          : 4px;
	margin       : 2px 0 6px 12px;
	padding      : 3px 8px;
	font-size    : 11px;
	border       : 1px dashed #a7aaad;
	border-radius: 3px;
	background   : none;
	color        : #50575e;
	cursor       : pointer;
	transition   : border-color .15s, color .15s, background .15s;
}
.cvb-btn-add-record-to-section:hover {
	border-color : #2271b1;
	color        : #2271b1;
	background   : #f0f6ff;
}
.cvb-btn-add-record-to-section .dashicons { font-size: 12px; width: 12px; height: 12px; line-height: 12px; }

/* Özel Bölüm — bölüm içine dereceli kayıt ekle butonu */
.cvb-btn-add-skill-to-section {
	display      : inline-flex;
	align-items  : center;
	gap          : 4px;
	margin       : 2px 0 6px 6px;
	padding      : 3px 8px;
	font-size    : 11px;
	border       : 1px dashed #059669;
	border-radius: 3px;
	background   : none;
	color        : #065f46;
	cursor       : pointer;
	transition   : border-color .15s, color .15s, background .15s;
}
.cvb-btn-add-skill-to-section:hover {
	border-color : #059669;
	color        : #059669;
	background   : #ecfdf5;
}
.cvb-btn-add-skill-to-section .dashicons { font-size: 12px; width: 12px; height: 12px; line-height: 12px; }

/* Özel Bölüm — bölüm başlığı satırı */
.cvb-item-row--section-hdr {
	background   : #f5f3ff;
	border-left  : 3px solid #8b5cf6;
	border-radius: 3px;
	margin-bottom: 4px;
}

/* ─────────────────────────────────────────────────────────────
   9. Basics fields
   ───────────────────────────────────────────────────────────── */

.cvb-basics-grid {
	display               : grid;
	grid-template-columns : 1fr 1fr;
	gap                   : 10px;
}
.cvb-basics-grid .cvb-field-full { grid-column: 1 / -1; }

.cvb-field-group { display: flex; flex-direction: column; gap: 4px; }

.cvb-field-label {
	font-size   : 12px;
	font-weight : 600;
	color       : #1d2327;
}

/* ─────────────────────────────────────────────────────────────
   10. Design tab — Layout picker
   ───────────────────────────────────────────────────────────── */

.cvb-section-title {
	font-size     : 11px;
	font-weight   : 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color         : #646970;
	margin        : 16px 0 8px;
}

.cvb-layout-picker {
	display : flex;
	gap     : 10px;
}

.cvb-layout-option {
	flex           : 1;
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 6px;
	padding        : 10px 8px;
	border         : 2px solid #dcdcde;
	border-radius  : 6px;
	background     : #fff;
	cursor         : pointer;
	font-size      : 12px;
	color          : #50575e;
	transition     : border-color .15s, box-shadow .15s;
}
.cvb-layout-option:hover { border-color: #2271b1; }
.cvb-layout-option.is-active {
	border-color : #2271b1;
	color        : #2271b1;
	box-shadow   : 0 0 0 2px rgba(34,113,177,.15);
}

/* Layout thumbnail illustrations */
.cvb-layout-thumb {
	width         : 60px;
	height        : 44px;
	border        : 1px solid #dcdcde;
	border-radius : 3px;
	background    : #f6f7f7;
	position      : relative;
	overflow      : hidden;
}

/* One-column thumb: single block */
.cvb-layout-thumb--one::after {
	content    : '';
	position   : absolute;
	inset      : 5px;
	background : #c3c4c7;
	border-radius: 2px;
}

/* Two-column thumb: sidebar + main */
.cvb-layout-thumb--two::before,
.cvb-layout-thumb--two::after {
	content      : '';
	position     : absolute;
	top          : 5px;
	bottom       : 5px;
	background   : #c3c4c7;
	border-radius: 2px;
}
.cvb-layout-thumb--two::before { left: 5px;  width: 18px; }
.cvb-layout-thumb--two::after  { left: 28px; right: 5px;  background: #dcdcde; }

/* Column position picker */
.cvb-col-pos-picker {
	display : flex;
	gap     : 10px;
}
.cvb-col-pos-option {
	flex           : 1;
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 6px;
	padding        : 10px 8px;
	border         : 1.5px solid #dcdcde;
	border-radius  : 8px;
	background     : #fff;
	cursor         : pointer;
	font-size      : 12px;
	color          : #50575e;
	transition     : border-color .15s, box-shadow .15s;
}
.cvb-col-pos-option:hover    { border-color: #6c5ce7; }
.cvb-col-pos-option.is-active {
	border-color : #6c5ce7;
	color        : #6c5ce7;
	box-shadow   : 0 0 0 2px rgba(108,92,231,.15);
}
.cvb-col-pos-thumb {
	width         : 60px;
	height        : 44px;
	border        : 1px solid #dcdcde;
	border-radius : 3px;
	background    : #f6f7f7;
	position      : relative;
	overflow      : hidden;
}
/* Left: narrow info col on left, wide main on right */
.cvb-col-pos-thumb--left::before {
	content: ''; position: absolute;
	top: 5px; bottom: 5px; left: 5px; width: 16px;
	background: #c3c4c7; border-radius: 2px;
}
.cvb-col-pos-thumb--left::after {
	content: ''; position: absolute;
	top: 5px; bottom: 5px; left: 26px; right: 5px;
	background: #dcdcde; border-radius: 2px;
}
/* Right: wide main on left, narrow info col on right */
.cvb-col-pos-thumb--right::before {
	content: ''; position: absolute;
	top: 5px; bottom: 5px; left: 5px; right: 26px;
	background: #dcdcde; border-radius: 2px;
}
.cvb-col-pos-thumb--right::after {
	content: ''; position: absolute;
	top: 5px; bottom: 5px; right: 5px; width: 16px;
	background: #c3c4c7; border-radius: 2px;
}
/* Active: purple highlight */
.cvb-col-pos-option.is-active .cvb-col-pos-thumb        { border-color: #6c5ce7; background: #f0effe; }
.cvb-col-pos-option.is-active .cvb-col-pos-thumb--left::before  { background: #6c5ce7; }
.cvb-col-pos-option.is-active .cvb-col-pos-thumb--left::after   { background: #ede9fc; }
.cvb-col-pos-option.is-active .cvb-col-pos-thumb--right::before { background: #ede9fc; }
.cvb-col-pos-option.is-active .cvb-col-pos-thumb--right::after  { background: #6c5ce7; }

/* Column width control */
.cvb-col-width-preview {
	display       : flex;
	height        : 38px;
	border-radius : 6px;
	overflow      : hidden;
	margin-bottom : 8px;
	gap           : 2px;
}
.cvb-col-width-bar {
	display         : flex;
	align-items     : center;
	justify-content : center;
	font-size       : 11px;
	font-weight     : 700;
	transition      : width .1s;
	min-width       : 0;
}
.cvb-col-width-bar--sidebar {
	background : #ede9fc;
	color      : #6c5ce7;
	flex-shrink: 0;
}
.cvb-col-width-bar--main {
	background : #f0f0f1;
	color      : #50575e;
	flex       : 1;
}
.cvb-col-width-slider {
	width        : 100%;
	accent-color : #6c5ce7;
	cursor       : pointer;
}

/* Color card grid */
.cvb-color-grid {
	display               : grid;
	grid-template-columns : repeat(3, 1fr);
	gap                   : 8px;
}
.cvb-color-card {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 7px;
	padding        : 12px 6px 10px;
	border         : 1.5px solid #dcdcde;
	border-radius  : 10px;
	background     : #fff;
	cursor         : pointer;
	transition     : border-color .15s, box-shadow .15s;
	position       : relative;
}
.cvb-color-card:hover {
	border-color : #6c5ce7;
	box-shadow   : 0 2px 8px rgba(0,0,0,.09);
}
.cvb-color-swatch {
	width         : 34px;
	height        : 34px;
	border-radius : 50%;
	border        : 2px solid rgba(0,0,0,.1);
	display       : block;
	flex-shrink   : 0;
	box-shadow    : inset 0 1px 3px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
}
.cvb-color-card__label {
	font-size   : 10.5px;
	color       : #50575e;
	text-align  : center;
	line-height : 1.3;
	font-weight : 500;
}
.cvb-color-card__input {
	position       : absolute;
	width          : 0;
	height         : 0;
	overflow       : hidden;
	border         : none;
	padding        : 0;
	pointer-events : none;
}

/* ─────────────────────────────────────────────────────────────
   11. Design tab — Theme picker
   ───────────────────────────────────────────────────────────── */

.cvb-theme-picker {
	display  : flex;
	flex-wrap: wrap;
	gap      : 8px;
}

.cvb-theme-option {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 6px;
	padding        : 8px 12px;
	border         : 2px solid #dcdcde;
	border-radius  : 6px;
	background     : #fff;
	cursor         : pointer;
	font-size      : 12px;
	color          : #50575e;
	min-width      : 72px;
	transition     : border-color .15s;
}
.cvb-theme-option:hover    { border-color: #2271b1; }
.cvb-theme-option.is-active {
	border-color : #2271b1;
	color        : #2271b1;
}

.cvb-theme-swatch {
	width         : 28px;
	height        : 28px;
	border-radius : 50%;
	border        : 2px solid rgba(0,0,0,.1);
	background    : #c3c4c7;
}

/* Per-theme swatch colours */
.cvb-theme-option[data-value="modern"]        .cvb-theme-swatch { background: #2563EB; }
.cvb-theme-option[data-value="classic"]       .cvb-theme-swatch { background: #1A1A1A; }
.cvb-theme-option[data-value="minimal"]       .cvb-theme-swatch { background: #0f172a; }
.cvb-theme-option[data-value="executive"]     .cvb-theme-swatch { background: linear-gradient(135deg,#1a2332 55%,#c9a227 100%); }
.cvb-theme-option[data-value="creative"]      .cvb-theme-swatch { background: linear-gradient(135deg,#5b21b6 0%,#7c3aed 60%,#f97316 100%); }
.cvb-theme-option[data-value="tech"]          .cvb-theme-swatch { background: #0f172a; border-color: #10b981; }
.cvb-theme-option[data-value="elegant"]       .cvb-theme-swatch { background: #8b5e7b; }
.cvb-theme-option[data-value="compact"]       .cvb-theme-swatch { background: #000; }
.cvb-theme-option[data-value="profile-blue"]  .cvb-theme-swatch { background: #0095b6; }
.cvb-theme-option[data-value="profile-left"]  .cvb-theme-swatch { background: linear-gradient(135deg,#1b3a5c 55%,#e8a020 100%); }
.cvb-theme-option[data-value="classic-red"]   .cvb-theme-swatch { background: #cc2222; }

/* ─────────────────────────────────────────────────────────────
   12. Column configuration
   ───────────────────────────────────────────────────────────── */

.cvb-columns-config {
	display : flex;
	gap     : 10px;
	margin  : 8px 0;
}

.cvb-col-zone {
	flex           : 1;
	border         : 1px solid #dcdcde;
	border-radius  : 4px;
	overflow       : hidden;
}

.cvb-col-zone__head {
	font-size    : 11px;
	font-weight  : 600;
	padding      : 6px 10px;
	background   : #f6f7f7;
	border-bottom: 1px solid #dcdcde;
	color        : #646970;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.cvb-col-zone__body {
	padding    : 6px;
	min-height : 44px;
}

.cvb-col-chip {
	display      : flex;
	align-items  : center;
	gap          : 5px;
	padding      : 5px 8px;
	margin-bottom: 5px;
	background   : #f6f7f7;
	border       : 1px solid #dcdcde;
	border-radius: 3px;
	font-size    : 12px;
	color        : #1d2327;
	cursor       : grab;
}
.cvb-col-chip:last-child { margin-bottom: 0; }
.cvb-col-chip:active     { cursor: grabbing; }
.cvb-col-chip .dashicons { color: #787c82; font-size: 14px; width: 14px; height: 14px; line-height: 14px; }

.cvb-chip-placeholder {
	height        : 30px;
	background    : #f0f6ff;
	border        : 1px dashed #2271b1;
	border-radius : 3px;
	margin-bottom : 5px;
}

/* Row-group: two chips side by side in one-column mode */
.cvb-col-row-group {
	display       : flex;
	align-items   : center;
	gap           : 4px;
	margin-bottom : 5px;
	padding       : 3px;
	background    : #e8f0fe;
	border        : 1px solid #b0c4f5;
	border-radius : 4px;
	position      : relative;
}
.cvb-col-row-group .cvb-col-chip {
	flex          : 1;
	margin-bottom : 0;
	background    : #fff;
	border-color  : #b0c4f5;
	min-width     : 0;
}
.cvb-col-pair-btn {
	margin-left   : auto;
	flex-shrink   : 0;
	width         : 18px;
	height        : 18px;
	padding       : 0;
	background    : none;
	border        : 1px solid #b0b8c1;
	border-radius : 3px;
	cursor        : pointer;
	color         : #787c82;
	font-size     : 13px;
	line-height   : 1;
	display       : flex;
	align-items   : center;
	justify-content: center;
}
.cvb-col-pair-btn::before {
	content: "⊞";
	font-size: 12px;
}
.cvb-col-pair-btn:hover {
	background    : #2271b1;
	border-color  : #2271b1;
	color         : #fff;
}
.cvb-col-ungroup-btn {
	flex-shrink   : 0;
	width         : 18px;
	height        : 18px;
	padding       : 0;
	background    : #c3c4c7;
	border        : none;
	border-radius : 3px;
	cursor        : pointer;
	color         : #1d2327;
	font-size     : 13px;
	font-weight   : 700;
	line-height   : 1;
	display       : flex;
	align-items   : center;
	justify-content: center;
}
.cvb-col-ungroup-btn:hover {
	background    : #d63638;
	color         : #fff;
}

/* ─────────────────────────────────────────────────────────────
   13. Export tab
   ───────────────────────────────────────────────────────────── */

.cvb-export-list { display: flex; flex-direction: column; gap: 10px; }

.cvb-publish-box {
	padding: 12px;
	margin-bottom: 12px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #fff;
}

.cvb-slug-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 2px;
}

.cvb-checkbox-label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 13px;
}
.cvb-checkbox-label input[type=checkbox] {
	width: 15px;
	height: 15px;
	margin: 0;
	cursor: pointer;
	flex-shrink: 0;
}
.cvb-slug-prefix {
	font-size: 12px;
	color: #666;
	white-space: nowrap;
}
.cvb-slug-input {
	flex: 1;
	min-width: 0;
}

.cvb-publish-box__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.cvb-publish-state {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.8;
	border: 1px solid transparent;
}

.cvb-publish-state.is-on {
	color: #116329;
	background: #edfaef;
	border-color: #7ad49a;
}

.cvb-publish-state.is-off {
	color: #803434;
	background: #fdf2f2;
	border-color: #f0a8a8;
}

.cvb-publish-box__actions {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
	flex-direction: column;
}

/* ── Publish share settings (expiry / access mode / PIN) ── */
.cvb-publish-settings {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cvb-publish-settings__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cvb-publish-settings__label {
	font-size: 11px;
	font-weight: 600;
	color: #1d2327;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cvb-publish-settings__control {
	display: flex;
	gap: 6px;
	align-items: center;
}

.cvb-publish-settings__control .cvb-input {
	flex: 1;
	min-width: 0;
}

.cvb-input--pin {
	font-family: 'Courier New', monospace;
	font-size: 1.1rem;
	letter-spacing: 0.25em;
	text-align: center;
	font-weight: 700;
}

.cvb-notify-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}

.cvb-notify-option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	cursor: pointer;
}

.cvb-notify-option input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}

.cvb-input--date {
	max-width: 160px;
}

.cvb-public-visibility-group {
	margin-top: 12px;
}

.cvb-public-visibility-group__title {
	font-size: 12px;
	font-weight: 600;
	color: #1d2327;
	margin-bottom: 6px;
}

.cvb-public-toggle-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.cvb-public-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 7px 10px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	font-size: 12px;
	color: #1d2327;
	text-align: left;
	transition: border-color .15s, color .15s, background .15s;
}

.cvb-public-toggle .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
	flex-shrink: 0;
}

.cvb-public-toggle.is-visible {
	border-color: #7ad49a;
	background: #f3fbf5;
	color: #116329;
}

.cvb-public-toggle.is-hidden {
	border-color: #f0a8a8;
	background: #fff5f5;
	color: #a33a3a;
}

.cvb-public-toggle.cvb-toggle-disabled {
	opacity: 0.4;
	pointer-events: none;
	cursor: default;
}

.cvb-export-item {
	display      : flex;
	align-items  : center;
	gap          : 12px;
	padding      : 12px;
	border       : 1px solid #dcdcde;
	border-radius: 6px;
	background   : #fff;
}
.cvb-export-item--disabled { opacity: .55; }

.cvb-export-icon { font-size: 28px; width: 28px; height: 28px; color: #787c82; flex-shrink: 0; }

.cvb-export-info { flex: 1; }
.cvb-export-info strong { display: block; font-size: 13px; color: #1d2327; margin-bottom: 2px; }
.cvb-export-info span   { font-size: 11px; color: #787c82; }

/* ─────────────────────────────────────────────────────────────
   14. Preview panel
   ───────────────────────────────────────────────────────────── */

.cvb-preview-panel {
	display         : flex;
	flex-direction  : column;
	flex            : 1;
	overflow        : hidden;
	background      : #f0f0f1;
}

/* Preview toolbar */
.cvb-preview-toolbar {
	display      : flex;
	align-items  : center;
	gap          : 8px;
	height       : 40px;
	padding      : 0 14px;
	background   : #fff;
	border-bottom: 1px solid #dcdcde;
	flex-shrink  : 0;
}

.cvb-preview-tabs {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.cvb-preview-tab {
	appearance: none;
	border: 1px solid #dcdcde;
	background: #f6f7f7;
	color: #50575e;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
	white-space: nowrap;
}

.cvb-preview-tab:hover {
	background: #eef4ff;
	border-color: #8cb4e9;
	color: #1d4f91;
}

.cvb-preview-tab.is-active {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.cvb-preview-tab:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(34,113,177,.22);
}

.cvb-preview-toolbar-status {
	display     : flex;
	align-items : center;
	gap         : 6px;
	font-size   : 12px;
	color       : #787c82;
	flex        : 1;
}

.cvb-zoom-controls {
	display     : flex;
	align-items : center;
	gap         : 6px;
	margin-left : auto;
}

.cvb-zoom-btn {
	background  : none;
	border      : 1px solid #dcdcde;
	border-radius: 3px;
	cursor      : pointer;
	padding     : 2px 4px;
	color       : #50575e;
	font-size   : 14px;
	line-height : 1;
	transition  : background .1s;
}
.cvb-zoom-btn:hover { background: #f0f0f1; }

#cvb-zoom-label {
	font-size : 11px;
	color     : #787c82;
	min-width : 38px;
	text-align: center;
}

/* Preview stage (scrollable gray area) */
.cvb-preview-stage {
	flex      : 1;
	overflow  : auto;
	padding   : 30px;
	display   : flex;
	justify-content: center;
	align-items    : flex-start;
}

/* The "paper" — A4-ish white sheet */
.cvb-preview-paper {
	width         : 794px;
	min-width     : 794px;
	max-width     : 794px;
	background    :  #ffffff;
	box-shadow    : 0 4px 24px rgba(0,0,0,.15);
	border-radius : 2px;
	flex-shrink   : 0;
	transform-origin: top center;
	transition    : zoom .1s;
}

#cvb-preview-content {
	min-height: 200px;
	width: 794px;
	min-width: 794px;
	max-width: 794px;
}

/* Loading skeleton placeholder */
.cvb-preview-placeholder {
	display         : flex;
	flex-direction  : column;
	align-items     : center;
	justify-content : center;
	min-height      : 300px;
	color           : #a7aaad;
	gap             : 12px;
}
.cvb-preview-placeholder .dashicons { font-size: 48px; width: 48px; height: 48px; }
.cvb-preview-placeholder p { font-size: 13px; }

/* ─────────────────────────────────────────────────────────────
   15. Toast notifications
   ───────────────────────────────────────────────────────────── */

#cvb-toast {
	position      : fixed;
	bottom        : 24px;
	right         : 24px;
	padding       : 10px 18px;
	border-radius : 4px;
	font-size     : 13px;
	font-weight   : 500;
	color         : #fff;
	background    : #1d2327;
	box-shadow    : 0 4px 12px rgba(0,0,0,.2);
	z-index       : 99999;
	opacity       : 0;
	transform     : translateY(10px);
	transition    : opacity .25s, transform .25s;
	pointer-events: none;
}
#cvb-toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

#cvb-toast.cvb-toast--success { background: #00a32a; }
#cvb-toast.cvb-toast--error   { background: #d63638; }
#cvb-toast.cvb-toast--warning { background: #dba617; }

/* ─────────────────────────────────────────────────────────────
   16. Generic button utilities
   ───────────────────────────────────────────────────────────── */

.cvb-btn {
	display      : inline-flex;
	align-items  : center;
	gap          : 5px;
	padding      : 7px 14px;
	font-size    : 13px;
	font-weight  : 500;
	border-radius: 3px;
	border       : 1px solid transparent;
	cursor       : pointer;
	transition   : background .15s, border-color .15s, box-shadow .15s;
}
.cvb-btn-primary { background: #2271b1; color: #fff; border-color: #2271b1; }
.cvb-btn-primary:hover { background: #135e96; border-color: #135e96; }
.cvb-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.cvb-btn-secondary { background: #fff; color: #2271b1; border-color: #2271b1; }
.cvb-btn-secondary:hover { background: #f0f6ff; }

/* ─────────────────────────────────────────────────────────────
   17. Responsive — stack at narrow viewports
   ───────────────────────────────────────────────────────────── */

@media ( max-width: 1100px ) {
	.cvb-editor-body { flex-direction: column; }

	.cvb-editor-panel {
		width     : 100%;
		max-height: 60vh;
		border-right : none;
		border-bottom: 1px solid #dcdcde;
	}

	.cvb-preview-panel { min-height: 40vh; }
	.cvb-preview-paper {
		width: 794px;
		min-width: 794px;
		max-width: 794px;
	}
	#cvb-preview-content {
		width: 794px;
		min-width: 794px;
		max-width: 794px;
	}
	.cvb-preview-stage { padding: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. Data Security section (Dışa Aktar tab)
   ───────────────────────────────────────────────────────────────────────────── */

.cvb-security-box__actions {
	display     : flex;
	gap         : 8px;
	flex-wrap   : wrap;
	margin-bottom: 8px;
}

.cvb-enc-locked-notice {
	display      : flex;
	align-items  : center;
	gap          : 6px;
	padding      : 8px 10px;
	background   : #fdf2f2;
	border       : 1px solid #f0a8a8;
	border-radius: 4px;
	font-size    : 12px;
	color        : #803434;
	margin-top   : 8px;
}

.cvb-enc-locked-notice .dashicons {
	font-size  : 16px;
	width      : 16px;
	height     : 16px;
	line-height: 16px;
	flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. Encryption password modal
   ───────────────────────────────────────────────────────────────────────────── */

.cvb-enc-modal-overlay {
	position       : fixed;
	inset          : 0;
	background     : rgba(0, 0, 0, 0.55);
	z-index        : 100100;
	display        : flex;
	align-items    : center;
	justify-content: center;
	backdrop-filter: blur(2px);
}

.cvb-enc-modal {
	position     : relative;
	background   : #fff;
	border-radius: 8px;
	box-shadow   : 0 8px 40px rgba(0, 0, 0, 0.22);
	padding      : 28px 32px 24px;
	width        : 420px;
	max-width    : calc(100vw - 32px);
	max-height   : calc(100vh - 48px);
	overflow-y   : auto;
}

.cvb-enc-modal__close {
	position   : absolute;
	top        : 12px;
	right      : 12px;
	background : none;
	border     : none;
	cursor     : pointer;
	padding    : 4px;
	color      : #787c82;
	font-size  : 18px;
	line-height: 1;
}
.cvb-enc-modal__close:hover { color: #d63638; }

.cvb-enc-modal__title {
	margin     : 0 0 6px;
	font-size  : 16px;
	font-weight: 600;
	color      : #1d2327;
}

.cvb-enc-modal__subtitle {
	margin   : 0 0 18px;
	font-size: 13px;
	color    : #646970;
}

.cvb-enc-modal__label {
	display    : block;
	font-size  : 12px;
	font-weight: 600;
	color      : #3c434a;
	margin     : 14px 0 4px;
}

.cvb-enc-modal__input {
	display      : block;
	width        : 100%;
	padding      : 7px 10px;
	border       : 1px solid #8c8f94;
	border-radius: 4px;
	font-size    : 13px;
	box-sizing   : border-box;
}
.cvb-enc-modal__input:focus {
	border-color : #2271b1;
	outline      : 2px solid rgba(34, 113, 177, 0.25);
	outline-offset: 0;
}

.cvb-enc-modal__input--mono {
	font-family: 'Courier New', monospace;
	font-size  : 12px;
}

.cvb-enc-modal__hint {
	font-size: 12px;
	color    : #646970;
	margin   : 0 0 12px;
}

.cvb-enc-modal__link {
	background     : none;
	border         : none;
	cursor         : pointer;
	color          : #2271b1;
	font-size      : 12px;
	padding        : 4px 0;
	text-decoration: underline;
	display        : block;
	margin-top     : 8px;
}
.cvb-enc-modal__link:hover { color: #135e96; }

.cvb-enc-modal__error {
	margin        : 12px 0 0;
	padding       : 8px 10px;
	background    : #fdf2f2;
	border        : 1px solid #f0a8a8;
	border-radius : 4px;
	font-size     : 12px;
	color         : #803434;
}

.cvb-enc-modal__footer {
	display        : flex;
	justify-content: flex-end;
	gap            : 8px;
	margin-top     : 20px;
	padding-top    : 16px;
	border-top     : 1px solid #f0f0f1;
}

/* ── Recovery Code Panel ──────────────────────────────────────── */
.cvb-enc-recovery-display {
	display        : flex;
	gap            : 8px;
	margin         : 12px 0;
	align-items    : center;
}

.cvb-enc-recovery-display code {
	flex           : 1;
	padding        : 8px 10px;
	background     : #f5f5f5;
	border         : 1px solid #ddd;
	border-radius  : 4px;
	font-size      : 12px;
	word-break     : break-all;
	font-family    : monospace;
}

.cvb-enc-modal__checkbox {
	display        : flex;
	gap            : 8px;
	align-items    : flex-start;
	margin-top     : 12px;
	font-size      : 13px;
	cursor         : pointer;
	line-height    : 1.5;
}

.cvb-enc-modal__checkbox input[type="checkbox"] {
	margin-top     : 2px;
	flex-shrink    : 0;
}


/* ── 18. Mobile responsive ( ≤ 768 px ) ────────────────────────────── */
@media ( max-width: 768px ) {

	/* WordPress admin overrides */
	#wpcontent      { padding-left : 0 !important; margin-left : 0 !important; }
	#wpbody-content { padding-bottom : 0; }

	/* App: fixed full-viewport */
	.cvb-editor-app {
		position : fixed;
		inset    : 0;
		height   : 100%;
		z-index  : 10000;
	}

	/* ── Topbar ── */
	.cvb-topbar {
		height  : 48px;
		padding : 0 10px;
		gap     : 6px;
	}
	.cvb-topbar__brand  { display : none; }
	.cvb-topbar__status { display : none; }
	.cvb-topbar__resume-switch { flex : 1; min-width : 0; }
	.cvb-topbar__resume-switch select { width : 100%; }
	.cvb-topbar__actions > *:not( #cvb-btn-save ):not( #cvb-mobile-menu-btn ) { display : none !important; }
	#cvb-mobile-menu-btn { display : inline-flex !important; align-items : center; }

	/* ── Editor body ── */
	.cvb-editor-body {
		flex-direction : column;
		overflow       : hidden;
	}

	/* ── Editor panel ── */
	.cvb-editor-panel {
		width          : 100%;
		max-height     : none;
		flex           : 1;
		min-height     : 0;
		border-right   : none;
		border-bottom  : none;
		padding-bottom : 104px; /* 56 tabs + 44 preview handle + 4 buffer */
		box-sizing     : border-box;
	}
	.cvb-pane-inner { padding : 12px; }

	/* ── Tabs → fixed bottom navigation ── */
	nav.cvb-tabs {
		position     : fixed;
		bottom       : 0;
		left         : 0;
		right        : 0;
		z-index      : 600;
		height       : 56px;
		background   : #fff;
		border-top   : 1px solid #dcdcde;
		border-bottom: none;
		box-shadow   : 0 -2px 10px rgba( 0, 0, 0, .10 );
		flex-shrink  : 0;
	}
	.cvb-tab {
		flex-direction  : column;
		justify-content : center;
		align-items     : center;
		gap             : 2px;
		font-size       : 9.5px;
		line-height     : 1.15;
		padding         : 6px 2px 4px;
		height          : 56px;
		border-bottom   : none;
		border-top      : 2px solid transparent;
		overflow        : hidden;
	}
	.cvb-tab.is-active {
		border-top-color : #2271b1;
		background       : rgba( 34, 113, 177, .06 );
		border-bottom    : none;
	}

	/* ── Preview panel → slide-up drawer ── */
	.cvb-preview-panel {
		position       : fixed;
		bottom         : 56px;
		left           : 0;
		right          : 0;
		height         : calc( 100dvh - 48px - 56px );
		transform      : translateY( calc( 100% - 44px ) );
		transition     : transform .32s cubic-bezier( .4, 0, .2, 1 );
		z-index        : 550;
		background     : #f6f7f7;
		box-shadow     : 0 -4px 24px rgba( 0, 0, 0, .18 );
		will-change    : transform;
		display        : flex;
		flex-direction : column;
	}
	.cvb-preview-panel.cvb-preview-open {
		transform : translateY( 0 );
	}

	/* Handle bar (injected by JS) */
	.cvb-preview-handle {
		display          : flex;
		align-items      : center;
		justify-content  : center;
		height           : 44px;
		flex-shrink      : 0;
		background       : #fff;
		border-bottom    : 1px solid #e0e0e0;
		cursor           : grab;
		gap              : 10px;
		user-select      : none;
		touch-action     : none;
		-webkit-user-select : none;
	}
	.cvb-preview-handle__pill {
		width         : 36px;
		height        : 4px;
		border-radius : 2px;
		background    : #c3c4c7;
		pointer-events: none;
	}
	.cvb-preview-handle__label {
		font-size      : 13px;
		font-weight    : 600;
		color          : #3c434a;
		pointer-events : none;
	}
	.cvb-preview-handle__arrow {
		font-size      : 14px;
		color          : #767676;
		pointer-events : none;
		transition     : transform .3s;
		line-height    : 1;
	}
	.cvb-preview-open .cvb-preview-handle__arrow {
		transform : rotate( 180deg );
	}

	/* Normal toolbar hidden; handle replaces it */
	.cvb-preview-toolbar { display : none; }

	/* Preview stage */
	.cvb-preview-stage {
		flex                       : 1;
		padding                    : 0;
		overflow                   : auto;
		align-items                : flex-start;
		justify-content            : flex-start;
		-webkit-overflow-scrolling : touch;
	}

	/* Paper: 794 px, scaled via JS transform+negative-margin trick */
	#cvb-preview-paper {
		min-width        : 794px !important;
		width            : 794px !important;
		transform-origin : top left;
	}
}

/* ── Mobile action sheet (injected by JS, shown only on mobile) ──── */
.cvb-mobile-sheet-overlay {
	display         : none;
	position        : fixed;
	inset           : 0;
	background      : rgba( 0, 0, 0, .5 );
	z-index         : 10500;
	opacity         : 0;
	transition      : opacity .25s;
	align-items     : flex-end;
}
.cvb-mobile-sheet-overlay.is-visible {
	display : flex;
}
.cvb-mobile-sheet-overlay.is-open {
	opacity : 1;
}
.cvb-mobile-sheet {
	width            : 100%;
	background       : #fff;
	border-radius    : 14px 14px 0 0;
	padding          : 8px 16px 32px;
	display          : flex;
	flex-direction   : column;
	gap              : 4px;
	transform        : translateY( 100% );
	transition       : transform .3s cubic-bezier( .4, 0, .2, 1 );
}
.cvb-mobile-sheet-overlay.is-open .cvb-mobile-sheet {
	transform : translateY( 0 );
}
.cvb-mobile-sheet__grip {
	width        : 36px;
	height       : 4px;
	border-radius: 2px;
	background   : #c3c4c7;
	margin       : 8px auto 12px;
}
.cvb-mobile-sheet .button {
	width            : 100%;
	text-align       : left !important;
	min-height       : 44px;
	display          : flex !important;
	align-items      : center;
	gap              : 10px;
	font-size        : 14px;
	padding          : 8px 12px;
	border-radius    : 6px !important;
	box-shadow       : none !important;
	border-color     : transparent !important;
}
.cvb-mobile-sheet .button:hover {
	background : #f0f6fc;
}
.cvb-mobile-sheet form.cvb-inline-form {
	display : contents; /* button inside form takes full row */
}

/* ── Rich Text Editor ────────────────────────────────────────────────────── */
.cvb-rich-editor {
	border        : 1px solid #dcdcde;
	border-radius : 4px;
	background    : #fff;
	overflow      : hidden;
	transition    : border-color .15s, box-shadow .15s;
}
.cvb-rich-editor:focus-within {
	border-color : #2271b1;
	box-shadow   : 0 0 0 2px rgba( 34, 113, 177, .2 );
}
.cvb-rich-toolbar {
	display     : flex;
	align-items : center;
	gap         : 2px;
	padding     : 4px 6px;
	border-bottom : 1px solid #dcdcde;
	background  : #f9f9f9;
	flex-wrap   : wrap;
}
.cvb-tb-btn {
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	width           : 28px;
	height          : 28px;
	padding         : 0;
	background      : transparent;
	border          : none;
	border-radius   : 4px;
	cursor          : pointer;
	color           : #1d2327;
	line-height     : 1;
	transition      : background .12s, color .12s;
	flex-shrink     : 0;
}
.cvb-tb-btn:hover  { background : #ededf0; }
.cvb-tb-btn.is-active {
	background : #6c5ce7;
	color      : #fff;
}
.cvb-tb-sep {
	width      : 1px;
	height     : 20px;
	background : #dcdcde;
	margin     : 0 4px;
	flex-shrink: 0;
}
.cvb-rich-content {
	padding   : 8px 10px;
	font-size : 12px;
	line-height : 1.6;
	color     : #1d2327;
	outline   : none;
	word-break: break-word;
}
.cvb-rich-content:empty::before {
	content        : attr( data-placeholder );
	color          : #aaa;
	pointer-events : none;
	display        : block;
}
.cvb-rich-content p    { margin : 0 0 4px; }
.cvb-rich-content ul,
.cvb-rich-content ol   { margin : 0 0 6px; padding-left : 20px; }
.cvb-rich-content li   { margin-bottom : 2px; }
.cvb-rich-content a    { color : #2271b1; }
.cvb-rich-content strong { font-weight : 700; }
.cvb-rich-content em   { font-style : italic; }

/* ── AI Öneri Butonları ─────────────────────────────────────────────── */
.cvb-ai-suggest-btn {
	display        : inline-flex;
	align-items    : center;
	gap            : 4px;
	background     : #f4f0ff;
	color          : #6c5ce7;
	border         : 1px solid #d4c5f9;
	border-radius  : 4px;
	cursor         : pointer;
	font-size      : 12px;
	font-weight    : 500;
	line-height    : normal;
	padding        : 5px 10px;
	margin-bottom: 5px;
	margin-left    : 8px;
	transition     : background .15s, border-color .15s;
	white-space    : nowrap;
	flex-shrink    : 0;
	vertical-align : middle;
}
.cvb-ai-suggest-btn:hover:not(:disabled) {
	background   : #ece6ff;
	border-color : #a78bfa;
}
.cvb-ai-suggest-btn:disabled {
	opacity : .6;
	cursor  : not-allowed;
}
/* Summary butonu (textarea üstü) */
.cvb-ai-suggest-btn--summary {
	margin-top    : 0;
	margin-left   : 0;
	margin-bottom : 6px;
}

/* ── PDF İndirme Bekleme Modalı ─────────────────────────────────── */
#cvb-pdf-modal {
	display        : none;
	position       : fixed;
	inset          : 0;
	z-index        : 999999;
	align-items    : center;
	justify-content: center;
}
#cvb-pdf-modal.cvb-modal--visible {
	display        : flex;
}
.cvb-pdf-modal__overlay {
	position       : absolute;
	inset          : 0;
	background     : rgba(0, 0, 0, .55);
}
.cvb-pdf-modal__box {
	position       : relative;
	z-index        : 1;
	background     : #fff;
	border-radius  : 10px;
	padding        : 32px 36px;
	width          : min(520px, 92vw);
	box-shadow     : 0 8px 40px rgba(0,0,0,.22);
	text-align     : center;
}
.cvb-pdf-modal__title {
	font-size      : 18px;
	font-weight    : 600;
	color          : #1e1e2d;
	margin         : 0 0 10px;
	line-height    : 1.4;
}
.cvb-pdf-modal__countdown-text {
	font-size      : 15px;
	color          : #555;
	margin         : 0 0 4px;
}
#cvb-countdown {
	display        : inline-block;
	min-width      : 24px;
	font-size      : 22px;
	font-weight    : 700;
	color          : #6c5ce7;
	line-height    : 1;
	vertical-align : middle;
}
#cvb-adsense-space {
	min-height     : 250px;
	background     : #f4f4f6;
	border         : 1px dashed #ccc;
	border-radius  : 6px;
	margin         : 20px 0 0;
	display        : flex;
	align-items    : center;
	justify-content: center;
	color          : #aaa;
	font-size      : 13px;
}

/* ─── Option pickers (card-style, consistent with layout/col-pos pickers) ─── */
.cvb-opt-picker {
	display   : flex;
	flex-wrap : wrap;
	gap       : 6px;
}
/* 4+3 grid layout — first 4 buttons fill row 1, last 3 fill row 2 */
.cvb-opt-picker--4-3 {
	display               : grid;
	grid-template-columns : repeat(12, 1fr);
}
.cvb-opt-picker--4-3 .cvb-opt-btn {
	grid-column : span 3;
}
.cvb-opt-picker--4-3 .cvb-opt-btn:nth-child(n+5) {
	grid-column : span 4;
}
.cvb-opt-btn {
	flex           : 1;
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 5px;
	padding        : 8px 6px;
	border         : 1.5px solid #dcdcde;
	border-radius  : 8px;
	background     : #fff;
	color          : #50575e;
	cursor         : pointer;
	font-size      : 11px;
	font-weight    : 500;
	white-space    : nowrap;
	transition     : border-color .15s, color .15s, box-shadow .15s;
}
.cvb-opt-btn:hover  { border-color: #6c5ce7; color: #6c5ce7; }
.cvb-opt-btn.is-active {
	border-color : #6c5ce7;
	background   : #f0effe;
	color        : #6c5ce7;
	box-shadow   : 0 0 0 2px rgba(108,92,231,.12);
}

/* Base thumb */
.cvb-opt-thumb {
	width         : 100%;
	min-width     : 28px;
	max-width     : 80px;
	height        : 32px;
	border        : 1px solid #dcdcde;
	border-radius : 4px;
	background    : #f6f7f7;
	position      : relative;
	overflow      : hidden;
	flex-shrink   : 0;
}
.cvb-opt-btn.is-active .cvb-opt-thumb {
	border-color : rgba(108,92,231,.35);
	background   : #ede9fe;
}

/* Font picker (3-col grid; thumb shows Aa in the font) */
.cvb-font-picker {
	display               : grid;
	grid-template-columns : repeat(3, 1fr);
	gap                   : 6px;
}
.cvb-font-thumb {
	display         : flex;
	align-items     : center;
	justify-content : center;
	font-size       : 17px;
	font-weight     : 700;
	color           : #50575e;
}
.cvb-opt-btn.is-active .cvb-font-thumb { color: #6c5ce7; }

/* ── Photo size ── */
[class*=cvb-opt-thumb--photo-]::before {
	content       : '';  position  : absolute;
	border-radius : 50%; background : #c3c4c7;
	left : 50%; transform : translateX(-50%);
}
.cvb-opt-thumb--photo-small::before  { width:10px; height:10px; top:10px; }
.cvb-opt-thumb--photo-medium::before { width:16px; height:16px; top: 7px; }
.cvb-opt-thumb--photo-large::before  { width:22px; height:22px; top: 4px; }

/* ── Icon set: 3 lines + left bullet ── */
.cvb-opt-thumb--icon-svg::after,
.cvb-opt-thumb--icon-dashicons::after,
.cvb-opt-thumb--icon-minimal::after {
	content : ''; position : absolute;
	right : 5px; top : 7px; height : 2px; width : 24px;
	background : #dcdcde;
	box-shadow : 0 6px 0 #dcdcde, 0 12px 0 #dcdcde;
}
.cvb-opt-thumb--icon-svg::before {
	content : ''; position : absolute;
	left : 6px; top : 6px; width : 5px; height : 5px;
	border-radius : 50%; background : #c3c4c7;
	box-shadow    : 0 6px 0 #c3c4c7, 0 12px 0 #c3c4c7;
}
.cvb-opt-thumb--icon-dashicons::before {
	content : ''; position : absolute;
	left : 6px; top : 6px; width : 5px; height : 5px;
	background : #c3c4c7;
	box-shadow : 0 6px 0 #c3c4c7, 0 12px 0 #c3c4c7;
}
.cvb-opt-thumb--icon-minimal::before {
	content : ''; position : absolute;
	left : 6px; top : 8px; width : 5px; height : 2px;
	background : #c3c4c7;
	box-shadow : 0 6px 0 #c3c4c7, 0 12px 0 #c3c4c7;
}
.cvb-opt-thumb--icon-none::after {
	content : ''; position : absolute;
	left : 6px; right : 6px; top : 7px; height : 2px;
	background : #e2e4e7;
	box-shadow : 0 6px 0 #e2e4e7, 0 12px 0 #e2e4e7;
}

/* ── Columns 1 / 2 / 3 — large card style ── */
.cvb-opt-thumb--cols-1,
.cvb-opt-thumb--cols-2,
.cvb-opt-thumb--cols-3 {
	width     : 78px;
	max-width : 100%;
	height    : 52px;
}
/* 1 column: single full-width block */
.cvb-opt-thumb--cols-1::before {
	content : ''; position : absolute;
	top : 9px; bottom : 9px; left : 9px; right : 9px;
	background : #c3c4c7; border-radius : 4px;
}
/* 2 columns: two equal blocks side by side */
.cvb-opt-thumb--cols-2::before {
	content : ''; position : absolute;
	top : 9px; bottom : 9px; left : 9px; width : 27px;
	background : #c3c4c7; border-radius : 4px;
}
.cvb-opt-thumb--cols-2::after {
	content : ''; position : absolute;
	top : 9px; bottom : 9px; right : 9px; width : 27px;
	background : #c3c4c7; border-radius : 4px;
}
/* 3 columns: box-shadow copies ::before with border-radius preserved */
.cvb-opt-thumb--cols-3::before {
	content    : ''; position : absolute;
	top : 9px; bottom : 9px; left : 9px; width : 18px;
	background : #c3c4c7; border-radius : 4px;
	box-shadow : 21px 0 0 0 #c3c4c7, 42px 0 0 0 #c3c4c7;
}

/* ── Skill bars show / hide ── */
.cvb-opt-thumb--skill-show::before {
	content : ''; position : absolute;
	top : 6px; left : 5px; right : 5px; height : 4px;
	background : #e2e4e7; border-radius : 2px;
	box-shadow : 0 8px 0 #e2e4e7, 0 16px 0 #e2e4e7;
}
.cvb-opt-thumb--skill-show::after {
	content : ''; position : absolute;
	top : 6px; left : 5px; width : 62%; height : 4px;
	background : #6c5ce7; border-radius : 2px;
	box-shadow : 0 8px 0 rgba(108,92,231,.5);
}
.cvb-opt-thumb--skill-hide::before {
	content : ''; position : absolute;
	top : 6px; left : 5px; right : 5px; height : 4px;
	background : #e2e4e7; border-radius : 2px;
	box-shadow : 0 8px 0 #e2e4e7, 0 16px 0 #e2e4e7;
}
.cvb-opt-thumb--skill-hide::after {
	content        : ''; position : absolute;
	top : 3px; left : 50%; bottom : 3px; width : 2px;
	transform      : translateX(-50%) rotate(45deg);
	background     : #b0b5bb; border-radius : 1px;
}

/* ── Skill bar types ── */
.cvb-opt-thumb--sbt-none::after {
	content       : ''; position : absolute;
	top : 10px; left : 7px; right : 7px; height : 8px;
	border        : 1.5px solid #dcdcde; border-radius : 2px;
}
.cvb-opt-thumb--sbt-bar::before {
	content : ''; position : absolute;
	top : 10px; left : 6px; right : 6px; height : 8px;
	background : #e2e4e7; border-radius : 2px;
}
.cvb-opt-thumb--sbt-bar::after {
	content : ''; position : absolute;
	top : 10px; left : 6px; width : 65%; height : 8px;
	background : #c3c4c7; border-radius : 2px;
}
.cvb-opt-thumb--sbt-skill::before {
	content : ''; position : absolute;
	top : 6px; left : 6px; right : 6px; height : 5px;
	background : #e2e4e7; border-radius : 2px;
}
.cvb-opt-thumb--sbt-skill::after {
	content : ''; position : absolute;
	top : 6px; left : 6px; width : 55%; height : 5px;
	background : #c3c4c7; border-radius : 2px;
	box-shadow : 0 9px 0 #e2e4e7, 0 18px 0 #e2e4e7;
}
.cvb-opt-thumb--sbt-star::before {
	content    : '★ ★ ★ ★'; position : absolute;
	top : 9px; left : 0; right : 0;
	text-align : center; font-size : 8px; line-height : 1;
	color      : #c3c4c7;
}
.cvb-opt-thumb--sbt-dot::before {
	content       : ''; position : absolute;
	top : 12px; left : 6px; width : 5px; height : 5px;
	border-radius : 50%; background : #c3c4c7;
	box-shadow    : 8px 0 0 #c3c4c7, 16px 0 0 #c3c4c7, 24px 0 0 #dcdcde, 32px 0 0 #dcdcde;
}
.cvb-opt-thumb--sbt-segmented::before {
	content    : ''; position : absolute;
	top : 11px; left : 4px; width : 7px; height : 7px;
	background : #c3c4c7; border-radius : 1px;
	box-shadow : 9px 0 0 #c3c4c7, 18px 0 0 #c3c4c7, 27px 0 0 #dcdcde, 36px 0 0 #dcdcde;
}
.cvb-opt-thumb--sbt-circular::before {
	content            : ''; position : absolute;
	top : 4px; left : 50%; margin-left : -11px;
	width : 22px; height : 22px;
	border-radius      : 50%;
	border             : 4px solid #dcdcde;
	border-top-color   : #c3c4c7;
	border-right-color : #c3c4c7;
}
/* ── Stepper (font-size controls) ── */
.cvb-stepper {
	display       : flex;
	align-items   : center;
	border        : 1.5px solid #dcdcde;
	border-radius : 8px;
	overflow      : hidden;
	background    : #fff;
	transition    : border-color .15s, box-shadow .15s;
}
.cvb-stepper:focus-within {
	border-color : #6c5ce7;
	box-shadow   : 0 0 0 2px rgba(108,92,231,.12);
}
.cvb-stepper-btn {
	width       : 34px;
	height      : 36px;
	border      : none;
	background  : transparent;
	cursor      : pointer;
	font-size   : 18px;
	font-weight : 300;
	color       : #50575e;
	flex-shrink : 0;
	line-height : 1;
	transition  : background .12s, color .12s;
}
.cvb-stepper-btn:hover  { background: #f0effe; color: #6c5ce7; }
.cvb-stepper-btn:active { background: #e5e1fd; }
.cvb-stepper-val {
	flex         : 1;
	text-align   : center;
	font-size    : 14px;
	font-weight  : 600;
	color        : #1d2327;
	border-left  : 1px solid #dcdcde;
	border-right : 1px solid #dcdcde;
	padding      : 8px 4px;
	min-width    : 36px;
	user-select  : none;
}
/* ─/* \u2014\u2014 Design tab groups \u2014\u2014 */
.cvb-design-group {
	display        : flex;
	flex-direction : column;
	gap            : 12px;
	background     : #f9f9fb;
	border         : 1px solid #e8e9eb;
	border-radius  : 10px;
	padding        : 14px;
	margin-bottom  : 10px;
}
.cvb-pane-inner > .cvb-design-group:last-child { margin-bottom: 0; }
.cvb-design-group .cvb-fg[style*='margin-bottom:'] { margin-bottom: 0 !important; }

/* ── Design group heading ── */
.cvb-design-group__heading {
	font-size     : 13px;
	font-weight   : 700;
	color         : #1d2327;
	margin        : 0;
	padding-bottom: 10px;
	border-bottom : 1px solid #e0e2e5;
}

/* ── Text-only opt button (no thumb) ── */
.cvb-opt-btn--text {
	flex-direction : row;
	justify-content: center;
	padding        : 10px 12px;
	font-size      : 12px;
	font-weight    : 600;
	letter-spacing : .01em;
}

/* ── Heading Style thumbs ── */
/* short-line: text block + short underline */
.cvb-opt-thumb--hstyle-short-line::before {
	content: ''; position: absolute;
	top: 6px; left: 7px; right: 7px; height: 5px;
	background: #c3c4c7; border-radius: 1px;
}
.cvb-opt-thumb--hstyle-short-line::after {
	content: ''; position: absolute;
	top: 15px; left: 7px; width: 16px; height: 2px;
	background: #c3c4c7;
}
/* long-line: text block + full-width underline */
.cvb-opt-thumb--hstyle-long-line::before {
	content: ''; position: absolute;
	top: 6px; left: 7px; right: 7px; height: 5px;
	background: #c3c4c7; border-radius: 1px;
}
.cvb-opt-thumb--hstyle-long-line::after {
	content: ''; position: absolute;
	top: 15px; left: 7px; right: 7px; height: 2px;
	background: #c3c4c7;
}
/* filled: text block with filled bg */
.cvb-opt-thumb--hstyle-filled::before {
	content: ''; position: absolute;
	top: 8px; left: 7px; right: 7px; height: 13px;
	background: #b0b5bb; border-radius: 2px;
}
/* outlined: text block with border */
.cvb-opt-thumb--hstyle-outlined::before {
	content: ''; position: absolute;
	top: 8px; left: 7px; right: 7px; height: 13px;
	border: 1.5px solid #b0b5bb; border-radius: 2px;
}

/* ── Heading Align thumbs ── */
/* heading block + short accent line, aligned L/C/R */
.cvb-opt-thumb--halign-left::before {
	content: ''; position: absolute;
	top: 6px; left: 6px; width: 26px; height: 5px;
	background: #c3c4c7; border-radius: 1px;
}
.cvb-opt-thumb--halign-left::after {
	content: ''; position: absolute;
	top: 16px; left: 6px; width: 16px; height: 2px;
	background: #c3c4c7;
}
.cvb-opt-thumb--halign-center::before {
	content: ''; position: absolute;
	top: 6px; left: 50%; margin-left: -13px; width: 26px; height: 5px;
	background: #c3c4c7; border-radius: 1px;
}
.cvb-opt-thumb--halign-center::after {
	content: ''; position: absolute;
	top: 16px; left: 50%; margin-left: -8px; width: 16px; height: 2px;
	background: #c3c4c7;
}
.cvb-opt-thumb--halign-right::before {
	content: ''; position: absolute;
	top: 6px; right: 6px; width: 26px; height: 5px;
	background: #c3c4c7; border-radius: 1px;
}
.cvb-opt-thumb--halign-right::after {
	content: ''; position: absolute;
	top: 16px; right: 6px; width: 16px; height: 2px;
	background: #c3c4c7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI CV Analysis — Button + Modal
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Topbar AI button ────────────────────────────────────────────────────── */
.cvb-btn-ai-analyze {
	background: linear-gradient(135deg, #6c5ce7, #a29bfe) !important;
	color: #fff !important;
	border-color: transparent !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px;
	position: relative;
	overflow: hidden;
	transition: opacity .2s, transform .1s !important;
}
.cvb-btn-ai-analyze:hover:not(:disabled) {
	opacity: .9 !important;
	transform: translateY(-1px);
}
.cvb-btn-ai-analyze:disabled {
	opacity: .6 !important;
	cursor: not-allowed !important;
}
.cvb-btn-ai-analyze--locked {
	background: linear-gradient(135deg, #b2bec3, #636e72) !important;
}

/* -- AI kullanim adedi rozeti -------------------------------------------- */
.cvb-ai-cnt {
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	min-width      : 20px;
	height         : 18px;
	padding        : 0 5px;
	margin-left    : 5px;
	border-radius  : 9px;
	font-size      : 11px;
	font-weight    : 700;
	line-height    : 1;
	background     : rgba(255,255,255,.28);
	color          : inherit;
	vertical-align : middle;
}
.cvb-ai-cnt--inf {
	background : rgba(255,255,255,.22);
	font-size  : 13px;
}
.cvb-btn-ai-analyze .cvb-ai-cnt {
	background : rgba(255,255,255,.3);
	color      : #fff;
}
.cvb-ai-suggest-btn .cvb-ai-cnt {
	background : #ede9fe;
	color      : #6c5ce7;
}

/* Inline spinner inside button */
.cvb-ai-btn-spinner {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cvb-ai-spin .7s linear infinite;
	vertical-align: middle;
	margin-right: 5px;
}
@keyframes cvb-ai-spin {
	to { transform: rotate(360deg); }
}

/* ── Modal overlay ───────────────────────────────────────────────────────── */
.cvb-analysis-overlay {
	position: fixed;
	inset: 0;
	z-index: 100200;
	background: rgba(0,0,0,.55);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px 40px;
	overflow-y: auto;
	backdrop-filter: blur(3px);
}

.cvb-analysis-box {
	position: relative;
	background: #fff;
	border-radius: 14px;
	width: 100%;
	max-width: 640px;
	box-shadow: 0 20px 60px rgba(0,0,0,.25);
	overflow: hidden;
	animation: cvb-analysis-drop .25s ease;
}
@keyframes cvb-analysis-drop {
	from { opacity:0; transform: translateY(-18px) scale(.97); }
	to   { opacity:1; transform: none; }
}

/* ── Close button ────────────────────────────────────────────────────────── */
.cvb-analysis__close {
	position: absolute;
	top: 14px; right: 16px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: #666;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
	transition: background .15s, color .15s;
	z-index: 1;
}
.cvb-analysis__close:hover { background: #f0f0f1; color: #1d2327; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.cvb-analysis__header {
	background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
	padding: 24px 24px 20px;
	color: #fff;
	text-align: center;
}
.cvb-analysis__header-icon { font-size: 32px; display: block; margin-bottom: 6px; }
.cvb-analysis__header h2 {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}
.cvb-analysis__header-sub {
	margin: 0;
	font-size: 12.5px;
	opacity: .85;
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.cvb-analysis-section {
	padding: 20px 24px;
	border-bottom: 1px solid #f0f0f1;
}
.cvb-analysis-section:last-child { border-bottom: none; }
.cvb-analysis__section-title {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: #1d2327;
}

/* ── ATS Score ring section ──────────────────────────────────────────────── */
.cvb-analysis-score-section {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px;
}
.cvb-score-ring-wrap {
	position: relative;
	flex-shrink: 0;
	width: 120px;
	height: 120px;
}
.cvb-score-ring {
	width: 120px;
	height: 120px;
	transform: rotate(-90deg);
}
.cvb-score-ring__bg {
	fill: none;
	stroke: #f0f0f1;
	stroke-width: 10;
}
.cvb-score-ring__fill {
	fill: none;
	stroke: #00b894;
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 326.7;   /* 2π×52 */
	stroke-dashoffset: 326.7;
	transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1), stroke .5s;
}
.cvb-score-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.cvb-score-value {
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	color: #1d2327;
	transition: color .5s;
}
.cvb-score-denom { font-size: 11px; color: #888; margin-top: 1px; }
.cvb-score-meta { flex: 1; min-width: 0; }
.cvb-score-label { font-size: 13px; font-weight: 700; color: #1d2327; margin-bottom: 10px; }
.cvb-score-bar-wrap {
	background: #f0f0f1;
	border-radius: 6px;
	height: 10px;
	overflow: hidden;
	margin-bottom: 10px;
}
.cvb-score-bar {
	height: 100%;
	border-radius: 6px;
	width: 0;
	transition: width .8s cubic-bezier(.4,0,.2,1), background .5s;
}
.cvb-score-verdict { font-size: 12.5px; font-weight: 600; }

/* ── İK feedback two-column ──────────────────────────────────────────────── */
.cvb-analysis-feedback-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 500px) {
	.cvb-analysis-feedback-cols { grid-template-columns: 1fr; }
}
.cvb-analysis-col__head {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 2px solid currentColor;
}
.cvb-analysis-col--strengths .cvb-analysis-col__head { color: #00b894; border-color: #00b894; }
.cvb-analysis-col--weaknesses .cvb-analysis-col__head { color: #f39c12; border-color: #f39c12; }
.cvb-analysis-list {
	margin: 0;
	padding: 0 0 0 18px;
	font-size: 13px;
	color: #3c434a;
	line-height: 1.7;
}
.cvb-analysis-list--green li::marker { color: #00b894; }
.cvb-analysis-list--amber li::marker { color: #f39c12; }

/* ── Gap analysis ────────────────────────────────────────────────────────── */
.cvb-gap-item {
	background: #fff8e1;
	border-left: 3px solid #f39c12;
	padding: 7px 12px;
	border-radius: 4px;
	font-size: 13px;
	margin-bottom: 6px;
	color: #3c434a;
}
.cvb-gap-fills {
	margin-top: 12px;
	background: #f0f7ff;
	border-radius: 8px;
	padding: 12px 14px;
}
.cvb-gap-fills__title { font-weight: 700; font-size: 12.5px; margin-bottom: 6px; color: #2271b1; }
.cvb-gap-fills ul { margin: 0; padding: 0 0 0 18px; font-size: 13px; color: #3c434a; line-height: 1.8; }
.cvb-analysis-ok {
	background: #f0fdf4;
	border-left: 3px solid #00b894;
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 13px;
	color: #065f46;
}

/* ── International warnings / tips ──────────────────────────────────────── */
.cvb-analysis-warning {
	background: #fff5f5;
	border: 1px solid #fca5a5;
	border-left: 4px solid #d63031;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 13px;
	color: #3c434a;
	margin-bottom: 10px;
}
.cvb-analysis-warning strong { display: block; margin-bottom: 6px; color: #d63031; }
.cvb-analysis-warning ul { margin: 0; padding: 0 0 0 18px; line-height: 1.8; }
.cvb-analysis-tips {
	background: #f0f7ff;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 13px;
}
.cvb-analysis-tips ul { margin: 0; padding: 0 0 0 18px; line-height: 1.8; color: #3c434a; }
/* ── Modern Scrollbar ──────────────────────────────────────────────── */
.cvb-editor-app ::-webkit-scrollbar { width: 6px; height: 6px; }
.cvb-editor-app ::-webkit-scrollbar-track { background: transparent; border-radius: 10px; }
.cvb-editor-app ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; transition: background .3s; }
.cvb-editor-app ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.cvb-editor-app { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }