/* Vini Fonts — Real Fonts (11.12.0) */
.vf-real { display: none; }
.vf-real:not([hidden]) { display: block; }
.vf-app.vf-real-on .vf-desk-tag { display: none !important; }
.vf-app.vf-real-on .vf-phone { display: none !important; }

.vf-real-head {
	background: var(--vf-surface, #fff);
	border: 1px solid var(--vf-border, #e3e5ef);
	border-radius: var(--vf-radius, 14px);
	padding: 12px 16px; margin-bottom: 10px;
	display: flex; flex-direction: column; gap: 3px;
}
.vf-real-head strong { font-size: 15px; color: var(--vf-text, #171923); }
.vf-real-head span { font-size: 12.5px; color: var(--vf-muted, #6a7080); line-height: 1.45; }

.vf-real-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.vf-real-chips button {
	border: 1px solid var(--vf-border, #e3e5ef); background: var(--vf-surface, #fff);
	color: var(--vf-text, #171923); border-radius: 999px;
	padding: 6px 13px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.vf-real-chips button[aria-pressed="true"] {
	background: var(--vf-accent, #6366f1); border-color: var(--vf-accent, #6366f1); color: #fff;
}

.vf-real-list { display: flex; flex-direction: column; gap: 10px; }
.vf-real-row {
	background: var(--vf-surface, #fff); border: 1px solid var(--vf-border, #e3e5ef);
	border-radius: var(--vf-radius, 14px); padding: 12px 16px 14px;
}
.vf-real-row.vf-real-hit { outline: 2px solid var(--vf-accent, #6366f1); }
.vf-real-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.vf-real-name { font-size: 12.5px; font-weight: 600; color: var(--vf-text, #171923); }
.vf-real-cat {
	font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
	color: var(--vf-muted, #6a7080); background: var(--vf-bg, #f4f5fb);
	border-radius: 6px; padding: 2px 7px;
}
.vf-real-prev {
	font-size: 40px; line-height: 1.3; color: var(--vf-text, #171923);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 0 8px;
}
.vf-real-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.vf-real-acts button {
	border: 1px solid var(--vf-border, #e3e5ef); background: var(--vf-bg, #f4f5fb);
	color: var(--vf-text, #171923); border-radius: 9px;
	padding: 6px 12px; font-size: 12.5px; cursor: pointer;
}
.vf-real-acts button:hover { border-color: var(--vf-accent, #6366f1); }

.vf-real-editor { display: none; }
.vf-real-editor:not([hidden]) {
	margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--vf-border, #e3e5ef);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
	gap: 10px 18px; align-items: center;
}
.vf-real-editor label { font-size: 12px; color: var(--vf-muted, #6a7080); display: flex; align-items: center; gap: 7px; }
.vf-real-editor input[type="range"] { width: 120px; }
.vf-real-canvas {
	grid-column: 1 / -1; max-width: 100%;
	border: 1px solid var(--vf-border, #e3e5ef); border-radius: 9px;
	background: repeating-conic-gradient(#eceef5 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}
.vf-real-dl {
	grid-column: 1 / -1; justify-self: start;
	background: var(--vf-accent, #6366f1); color: #fff; border: 0;
	border-radius: 9px; padding: 8px 15px; font-size: 13px; cursor: pointer;
}

/* ── mobile: flip button inside the input, chips scroll horizontally ── */
@media (min-width: 1024px) { .vf-real-seg { display: none !important; } }
.vf-real-seg {
	display: inline-flex; gap: 3px; margin: 8px 0 2px;
	background: var(--vf-surface, #fff); border: 1px solid var(--vf-border, #e3e5ef);
	border-radius: 999px; padding: 3px;
}
.vf-real-seg button {
	border: 0; background: none; border-radius: 999px;
	padding: 7px 14px; font-size: 13px; font-weight: 600;
	color: var(--vf-muted, #6a7080); cursor: pointer; white-space: nowrap;
}
.vf-real-seg button.vf-real-seg-on { background: var(--vf-text, #171923); color: #fff; }

.vf-real-flip[aria-pressed="true"] {
	background: var(--vf-accent, #6366f1); border-color: var(--vf-accent, #6366f1); color: #fff;
}
.vf-real-chips-rail {
	flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
	margin: 2px 0 6px; padding-bottom: 4px; scrollbar-width: none;
}
.vf-real-chips-rail::-webkit-scrollbar { display: none; }

@media (max-width: 1023.98px) {
	.vf-app.vf-real-on #vf-rail { display: none !important; }
	.vf-app.vf-real-mobile .vf-tools-row { display: none !important; }
	.vf-real-chips-inline {
		flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
		padding-bottom: 4px; scrollbar-width: thin;
	}
	.vf-real-prev { font-size: 30px; }
}

/* ── desktop: categories move to the left rail, panel sits in the grid slot ── */
@media (min-width: 1024px) {
	.vf-app.vf-desk.vf-real-on .vf-real-chips-inline { display: none; }
	.vf-app.vf-desk.vf-real-on .vf-desk-side > *:not(#vf-real-side) { display: none !important; }
	.vf-app.vf-desk.vf-real-on .vf-tools-row { display: none !important; }
	.vf-real-head { flex-direction: row; align-items: baseline; gap: 10px; }
	.vf-real-prev { font-size: 32px; }
	.vf-real-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	#vf-real-side .vf-real-chips { flex-direction: column; align-items: stretch; gap: 4px; }
	#vf-real-side .vf-real-chips button { text-align: left; border-radius: 10px; padding: 7px 12px; }
	.vf-real-side-kick {
		font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
		color: var(--vf-muted, #6a7080); padding: 4px 2px 8px;
	}
}

/* ── standalone shortcode block ── */
.vf-real-sa { display: block; }
.vf-real-sa-title { margin: 0 0 12px; }
.vf-real-sa-bar { margin-bottom: 12px; }
.vf-real-sa-input {
	width: 100%; box-sizing: border-box;
	border: 1px solid var(--vf-border, #e3e5ef); border-radius: 12px;
	padding: 12px 15px; font-size: 16px; color: var(--vf-text, #171923);
	background: var(--vf-surface, #fff);
}


/* ── Discord preview, matched to the real profile card (11.12.1) ── */
.vf-app .vf-phone-screen.vf-dc { background: #1e1f22; color: #dbdee1; }
.vf-app .vf-phone-screen.vf-dc .vf-dc-banner {
	background: #5865f2; height: 104px; border-radius: 14px 14px 0 0;
}
.vf-app .vf-phone-screen.vf-dc .vf-dc-body { background: #1e1f22; padding: 0 16px 16px; position: relative; }
.vf-app .vf-phone-screen.vf-dc .vf-sp-avatar.vf-dc-av {
	width: 82px; height: 82px; border-radius: 50%;
	border: 6px solid #1e1f22; background: #5865f2; color: #fff;
	margin: -40px 0 0; position: relative;
	display: flex; align-items: center; justify-content: center;
	font-size: 30px; font-weight: 700; font-style: italic;
}
.vf-app .vf-phone-screen.vf-dc .vf-dc-online {
	position: absolute; right: -1px; bottom: -1px; width: 22px; height: 22px;
	border-radius: 50%; background: #57a05f; border: 5px solid #1e1f22; display: block;
}
.vf-app .vf-phone-screen.vf-dc .vf-dc-card { background: transparent; border: 0; padding: 14px 0 0; margin: 0; }
.vf-app .vf-phone-screen.vf-dc .vf-dc-name { color: #f2f3f5; font-size: 21px; font-weight: 800; line-height: 1.2; }
.vf-app .vf-phone-screen.vf-dc .vf-dc-handle {
	color: #dbdee1; font-size: 14px; display: flex; align-items: center; gap: 7px; margin-top: 3px;
}
.vf-app .vf-phone-screen.vf-dc .vf-dc-bio {
	color: #dbdee1; font-size: 14.5px; line-height: 1.5; margin-top: 16px; word-break: break-word;
}
.vf-app .vf-phone-screen.vf-dc .vf-dc-btn {
	display: block; margin-top: 18px; background: #5865f2; color: #fff; border: 0;
	border-radius: 9px; padding: 11px 14px; font-size: 14.5px; font-weight: 600; text-align: center;
}
.vf-app .vf-phone-screen.vf-dc .vf-dc-sec,
.vf-app .vf-phone-screen.vf-dc .vf-dc-meta { display: none; }


/* ── dock: live real-font preview card (Text & design mode) ── */
#vf-real-dock {
	background: var(--vf-surface, #fff); border: 1px solid var(--vf-border, #e3e5ef);
	border-radius: var(--vf-radius, 14px); padding: 13px 15px 14px; margin-bottom: 12px;
}
#vf-real-dock[hidden] { display: none; }
.vf-real-dock-kick {
	font-size: 10.5px; letter-spacing: .08em; color: var(--vf-muted, #6a7080); margin-bottom: 6px;
}
.vf-real-dock-name { font-size: 14px; font-weight: 700; color: var(--vf-text, #171923); margin-bottom: 8px; }
.vf-real-dock-canvas {
	max-width: 100%; border: 1px solid var(--vf-border, #e3e5ef); border-radius: 9px;
	background: repeating-conic-gradient(#eceef5 0 25%, #fff 0 50%) 0 0 / 14px 14px;
	margin-bottom: 10px;
}
.vf-real-dock-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.vf-real-dock-top > button {
	border: 1px solid var(--vf-border, #e3e5ef); background: var(--vf-bg, #f4f5fb);
	color: var(--vf-text, #171923); border-radius: 8px; width: 28px; height: 28px;
	font-size: 16px; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.vf-real-dock-id { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.vf-real-dock-cat {
	font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
	color: var(--vf-muted, #6a7080); background: var(--vf-bg, #f4f5fb);
	border-radius: 6px; padding: 2px 6px; flex: 0 0 auto;
}
.vf-real-dock-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.vf-real-dock-ctl label { font-size: 11.5px; color: var(--vf-muted, #6a7080); display: flex; align-items: center; gap: 5px; }
.vf-real-dock-ctl input[type="range"] { width: 90px; }
.vf-real-dock-acts { display: flex; gap: 8px; }
.vf-real-dock-acts button {
	border: 1px solid var(--vf-border, #e3e5ef); background: var(--vf-bg, #f4f5fb);
	color: var(--vf-text, #171923); border-radius: 9px; padding: 6px 12px;
	font-size: 12.5px; cursor: pointer;
}
.vf-real-dock-hint { font-size: 11px; color: var(--vf-muted, #6a7080); margin-top: 8px; }

/* the shot-variant discord overlay lines */
.vf-shot-dc .vf-shot-line { position: absolute; line-height: 1.35; }