/* ==========================================================================
   Download Free Fonts - Classic compact theme (2000-era look)
   Replaces the previous "2026 Revamp". Plain, dense, table-like layout.
   Loaded after Bootstrap 3.3.6, so a few !important calls override Bootstrap.
   ========================================================================== */

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: #ffffff;
	color: #000000;
	font-family: Verdana, Geneva, Tahoma, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.45;
}

/* kill the old animated "Aa" watermark, gradients and floating orbs */
body::before,
body::after { content: none !important; display: none !important; }

img { border: 0; max-width: 100%; }

a { color: #15489c; text-decoration: none; }
a:hover, a:focus { color: #cc0000; text-decoration: underline; }

h1, h2, h3, h4 { font-family: Verdana, Geneva, Tahoma, Arial, sans-serif; }

code { background: #f2f2f2; border: 1px solid #ddd; padding: 0 3px; color: #b00; font-size: 11px; }

/* ---------- Page frame ---------- */
.main-container {
	position: relative;
	z-index: auto;
	max-width: 1180px;
	margin: 0 auto;
	padding: 6px 12px 30px;
}

.container,
.top-bar-section,
main,
footer { position: static; z-index: auto; }

/* ---------- Header ---------- */
.site-header { padding: 0; }
.site-header-nav { max-width: none; margin: 0; }
.top-bar-section { display: block; }

.site-header .navigation {
	position: static;
	overflow: visible;
	padding: 6px 0 8px;
	background: #ffffff;
	border: 0;
	border-bottom: 2px solid #cc0000;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
}

/* hide the modern flourishes entirely */
.header-orb,
.header-orb-one,
.header-orb-two,
.brand-logo-aura,
.brand-logo-sheen,
.dff-mark-logo,
.brand-meta,
.brand-pill,
.header-tools,
.theme-toggle { display: none !important; }

.header-top-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}

.header-brand { display: flex; flex-direction: column; gap: 1px; }
.header-brand-row { display: flex; align-items: center; gap: 12px; }

.banner { background: transparent; padding: 0; }
.brand-link { display: inline-flex; }

.brand-logo-shell {
	position: static;
	display: inline-flex;
	align-items: center;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.dff-svg-logo {
	/* wide wordmark (intrinsic ~300x22): size by width so it stays
	   proportional at any container size instead of being squashed */
	position: static;
	z-index: auto;
	width: 430px;
	max-width: 100%;
	height: auto;
	filter: none;
}

.brand-copy { display: block; max-width: none; }
.brand-tagline {
	margin: 0;
	font-size: 11px;
	line-height: 1.3;
	color: #555;
}

/* ---------- Intro / browse panel ---------- */
.intro { display: block; }
.intro .alert {
	margin: 6px 0;
	padding: 6px 8px;
	border: 1px solid #ddd;
	border-radius: 0;
	background: #fbfbe8;
	color: #000;
	box-shadow: none;
	font-size: 11px;
}

.top-nav { display: block; margin: 0; }
.top-categories { display: block; }

.top-categories .browse-panel,
.browse-panel {
	position: static;
	overflow: visible;
	padding: 6px 0;
	background: #ffffff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
}
.browse-panel::before,
.top-categories .browse-panel::before { content: none; }

/* ---------- Search box ---------- */
.category-search-row { margin: 2px 0 6px; }
.search.header-search,
.header-search { display: block; width: auto; }
.header-search-form,
.search-autocomplete { position: relative; display: inline-block; width: auto; }

.search-input-shell {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
}
.search-input-leading,
.search-input-caption { display: none; }
.search-input-copy { display: inline-block; min-width: 0; }

.header-search-input.form-control,
input.header-search-input {
	height: 24px;
	width: 320px;
	max-width: 60vw;
	padding: 2px 6px;
	border: 1px solid #7f9db9;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	font-family: inherit;
	font-size: 12px;
	font-weight: normal;
	color: #000;
}
.header-search-input.form-control:focus { box-shadow: none; outline: 1px solid #cc0000; }

.header-search-button,
.btn.header-search-button {
	height: 24px;
	min-width: 0;
	padding: 1px 12px;
	border: 1px solid #888 !important;
	border-radius: 0 !important;
	background: #ececec !important;
	background-image: none !important;
	color: #000 !important;
	font-family: inherit;
	font-size: 12px;
	font-weight: bold;
	box-shadow: none !important;
	text-transform: none;
}
.header-search-button:hover { background: #e0e0e0 !important; box-shadow: none !important; transform: none !important; }

/* autocomplete suggestions */
.search-suggestions {
	position: absolute;
	z-index: 60;
	left: 0;
	top: 26px;
	min-width: 320px;
	margin: 0;
	padding: 3px;
	border: 1px solid #888;
	border-radius: 0;
	background: #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.search-suggestions-head { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 4px; padding: 2px 4px; }
.search-suggestions-title { font-family: inherit; font-size: 11px; font-weight: bold; color: #333; }
.search-suggestions-copy { font-size: 10px; color: #888; }
.search-suggestions-list { display: block; }
.search-suggestion-option {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 2px 5px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #000;
	text-align: left;
	transition: none;
}
.search-suggestion-option:hover,
.search-suggestion-option.is-active { background: #ffe9e9; transform: none; box-shadow: none; }
.search-suggestion-type {
	padding: 0 4px;
	border-radius: 0;
	background: #eee;
	color: #777;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
}
.search-suggestion-text { min-width: 0; font-weight: normal; font-size: 11px; }
.search-suggestion-option mark { background: transparent; color: #cc0000; padding: 0; }

/* ---------- Alphabet browser ---------- */
.alphabet-browser {
	margin: 4px 0;
	padding: 3px 0;
	border: 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	text-align: center;
}
.azsort,
.azsort-scroll,
.top-categories .azsort-scroll {
	display: block;
	overflow: visible;
	scrollbar-width: auto;
}
.top-categories .azsort.azsort-scroll { width: auto; min-width: 0; margin: 0; }
.azsort-scroll a,
.top-categories .azsort-scroll a {
	display: inline-block;
	flex: none;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0 4px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #15489c;
}
.azsort-scroll a:hover,
.top-categories .azsort-scroll a:hover { transform: none; color: #cc0000; text-decoration: underline; }

/* ---------- Category directory (the red grid) ---------- */
.mobile-nav { display: none; }
.desktop-category-nav { display: block; margin: 6px 0 0; }

.top-categories .category-directory,
.category-directory {
	display: flex;
	gap: 0;
	border: 2px solid #cc0000;
	border-radius: 0;
	background: #ffffff;
	overflow: hidden;
}
.top-categories .category-column,
.category-column {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 0 6px;
	border-right: 1px dotted #d8a3a3;
}
.top-categories .category-column:last-child,
.category-column:last-child { border-right: 0; }

.category-group { margin: 0; }
.top-categories .category-group + .category-group,
.category-group + .category-group { margin-top: 4px; }

/* continuation columns (no heading) start one header-row lower to line up */
.category-column > .category-group-secondary:first-child { margin-top: 18px; }

.top-categories .category-group-title,
.category-group-title {
	display: block;
	min-width: 0;
	margin: 0 0 2px;
	padding: 1px 5px;
	background: #cc0000;
	border-radius: 0;
	color: #ffffff;
	font-family: inherit;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.5;
}
.category-group-title a { color: #ffffff; text-decoration: none; }
.category-group-title a:hover { color: #ffffff; text-decoration: underline; }

.top-categories .category-list,
.category-list {
	display: block;
	margin: 0;
	padding: 0 5px;
	list-style: none;
}
.category-list li { margin: 0; }
.top-categories .category-list a,
.category-list a {
	display: block;
	padding: 0;
	color: #000000;
	font-size: 11px;
	font-weight: normal;
	line-height: 1.5;
}
.top-categories .category-list a:hover,
.category-list a:hover { transform: none; color: #cc0000; text-decoration: underline; }

/* ---------- Custom preview bar ---------- */
.cst-sample {
	margin: 6px 0;
	padding: 5px 8px;
	background: #f3f3f3;
	border: 1px solid #ccc;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}
.cst-sample::before { content: none; }
.cst-txt-input,
.custom-text-form,
.cst-sample form,
.custom-preview-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	width: 100%;
}
.custom-preview-field { display: flex; align-items: center; gap: 5px; }
.custom-preview-field-text { flex: 1 1 280px; }
.custom-preview-label { margin: 0; font-size: 11px; font-weight: bold; color: #333; }

.cst-sample input[type="text"],
.cst-sample input.form-control,
input.cst-txt {
	flex: 1;
	min-width: 150px;
	width: auto;
	height: 24px;
	margin: 0;
	padding: 2px 6px;
	border: 1px solid #7f9db9;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	font-family: inherit;
	font-size: 12px;
	color: #000;
}
.cst-size-select,
select.cst-size-select,
.cst-sample select.form-control {
	height: 24px;
	width: auto;
	padding: 1px 4px;
	border: 1px solid #7f9db9;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	font-family: inherit;
	font-size: 12px;
}
.custom-preview-actions { display: flex; gap: 6px; }

/* ---------- Generic classic buttons (overrides Bootstrap .btn family) ---------- */
.btn,
a.btn,
button.btn,
.font-card-button,
.site-primary-action,
.font-detail-share-link,
.footer-box .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 2px 10px;
	border: 1px solid #888 !important;
	border-radius: 0 !important;
	background: #ececec !important;
	background-image: none !important;
	color: #000000 !important;
	font-family: inherit;
	font-size: 12px;
	font-weight: bold;
	line-height: 18px;
	text-shadow: none;
	box-shadow: none !important;
	cursor: pointer;
	transition: none !important;
	text-transform: none;
}
.btn:hover, a.btn:hover, button.btn:hover,
.font-card-button:hover,
.site-primary-action:hover,
.font-detail-share-link:hover {
	background: #e0e0e0 !important;
	color: #000 !important;
	text-decoration: none;
	transform: none !important;
	box-shadow: none !important;
}
.btn-sm { padding: 1px 8px; font-size: 11px; line-height: 16px; }
.btn .glyphicon { font-size: 11px; top: 1px; }

/* the danger/reset button gets a faintly red classic look */
.btn-danger { color: #a00 !important; }

/* ---------- Font list cards (home / category / search / related) ---------- */
.font-box,
.search-results-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.single-font,
.font-item.font-card,
.font-card {
	position: relative;
	display: block;
	gap: 0;
	margin: 0;
	padding: 0;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	animation: none !important;
}
.single-font::before,
.font-item.font-card::before,
.font-card::before { content: none; }
.single-font:hover,
.font-item.font-card:hover,
.font-card:hover { transform: none; box-shadow: none; }

/* red title bar */
.font-card-head {
	position: static;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 3px 8px;
	background: #cc0000;
	color: #ffffff;
}
.font-name,
.font-card-copy {
	display: block;
	flex: 1 1 auto;
	gap: 0;
	min-width: 0;
	color: #ffffff;
	font-size: 11px;
	line-height: 1.35;
	overflow: hidden;
}
.font-card-title,
.search-h2 {
	display: block;
	margin: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.25;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.font-name a,
.font-card-copy a { color: #ffffff; }
.font-name a:hover,
.font-card-copy a:hover { color: #ffffff; text-decoration: underline; }

.font-card-actions,
.down-btn {
	position: static;
	display: flex;
	flex-direction: row-reverse;   /* Download button sits to the right of the category */
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 0;
}

/* category link inside the red bar */
.font-card-license,
.font-card-category,
.cp,
.font-card-meta span {
	display: inline-block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #ffffff;
	font-size: 11px;
	font-weight: normal;
}
.font-card-actions .font-card-category:hover,
.cp:hover { color: #ffffff; text-decoration: underline; }

/* preview area */
.font-sample,
.font-preview-panel { position: static; display: block; }
.font-preview-visual {
	position: static;
	display: block;
	padding: 6px 8px;
	border: 0;
	border-radius: 0;
	background: #ffffff;
	overflow: hidden;
}
.font-preview-backdrop,
.font-preview-zoom { display: none !important; }
.font-preview-visual img,
.font-preview-visual .prev-img,
.prev-img,
.prev-img-details {
	position: static;
	z-index: auto;
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0;
	transform: none !important;
	transition: none !important;
	filter: none !important;
}
.font-preview-visual:hover img,
.font-preview-visual:hover .prev-img { transform: none !important; }

/* ---------- Section headers / page headers ---------- */
.latest-fonts,
.download-box {
	position: static;
	overflow: visible;
	margin-top: 10px;
	padding: 0;
	background: #ffffff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
}
.latest-fonts::before,
.download-box::before { content: none; }

.page-header,
.category-page-intro {
	margin: 8px 0 6px;
	padding: 0;
}
.page-header-kicker { display: none; }

.page-header h1,
.cat-header,
.download-box > h1 {
	margin: 2px 0 3px;
	font-family: inherit;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
	color: #cc0000;
}
.page-header p,
.page-header p.roboto,
.download-box > p,
.cat-keywords small {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: #333;
}
/* "Recently added fonts" heading (a <p class="roboto">) */
.latest-fonts > .page-header p.roboto {
	font-size: 15px;
	font-weight: bold;
	color: #cc0000;
}
.cat-keywords { margin: 2px 0 0; }

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 6px;
	padding: 0;
	background: none;
	color: #777;
	font-size: 11px;
}

/* ---------- Pagination ---------- */
.website-pagination { grid-column: 1 / -1; margin-top: 8px; padding-top: 6px; }
.website-pagination > p { margin: 0; }
.pagi { display: block; }
.pagi-pages.pagination,
ul.pagination.pagi-pages,
.pagination {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 3px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pagi-pages li,
.pagination > li { display: inline-block; margin: 0; }
.pagi-pages li a,
.pagi-pages .active a,
.pagination > li > a,
.pagination > li > span {
	display: inline-block;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 1px 7px;
	border: 1px solid #aaa;
	border-radius: 0;
	background: #fff;
	color: #15489c;
	font-size: 12px;
	font-weight: normal;
	line-height: 18px;
}
.pagi-pages li.active a,
.pagi-pages li a:hover,
.pagination > .active > a,
.pagination > li > a:hover {
	background: #cc0000;
	border-color: #cc0000;
	color: #fff;
	text-decoration: none;
}
.page-numbers {
	display: inline-flex;
	align-items: center;
	padding: 0 4px;
	color: #777;
	font-weight: normal;
	font-size: 11px;
}

/* empty-search / error notice */
.red,
.font-details .main-content {
	padding: 8px 10px;
	border: 1px solid #cc0000;
	border-radius: 0;
	background: #fff5f5;
	color: #cc0000;
	font-size: 12px;
}

/* ==========================================================================
   Font details page
   ========================================================================== */
.font-details { display: block; }
.font-detail-shell {
	border: 1px solid #cccccc;
	background: #fff;
	padding: 0;
	margin: 0 0 8px;
}
.font-detail-hero {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 10px;
	background: #f7f7f7;
	border-bottom: 1px solid #ddd;
}
.font-detail-copy { flex: 1 1 320px; min-width: 0; }
.font-detail-copy h1 { margin: 2px 0 4px; font-size: 19px; font-weight: bold; color: #000; }
.font-detail-subtitle { margin: 0 0 4px; font-size: 12px; color: #555; }
.font-detail-description { margin: 0 0 8px; font-size: 12px; color: #333; }
.font-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.font-detail-preview { flex: 1 1 320px; min-width: 0; }
.font-preview-panel-detail { border: 1px solid #ddd; background: #fff; }

.font-detail-meta-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid #eee;
}
.font-detail-meta-card {
	flex: 1 1 18%;
	min-width: 120px;
	padding: 5px 8px;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	background: #fff;
}
.font-detail-meta-label {
	display: block;
	margin: 0 0 1px;
	font-size: 10px;
	font-weight: normal;
	text-transform: uppercase;
	color: #888;
}
.font-detail-meta-card strong { font-size: 12px; color: #000; }

.font-detail-content-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px;
}
.font-detail-panel {
	flex: 1 1 300px;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid #ddd;
	background: #fafafa;
}
.font-detail-panel h2 { margin: 0 0 6px; font-size: 14px; font-weight: bold; color: #cc0000; }
.font-detail-richtext { font-size: 12px; color: #333; }
.font-detail-richtext p { margin: 0 0 6px; }
.font-detail-muted { font-size: 12px; color: #777; }
.font-detail-illustration { margin: 0 0 8px; }
.font-detail-illustration img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid #ddd;
}
.font-detail-share { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.font-detail-share-link { padding: 1px 8px; font-size: 11px; font-weight: normal; }

/* comments */
.font-comments-shell {
	margin-top: 8px;
	padding: 10px;
	border: 1px solid #ccc;
	background: #fff;
}
.font-comments-head h2 { margin: 2px 0 4px; font-size: 15px; font-weight: bold; color: #cc0000; }
.font-comments-head p { margin: 0 0 6px; font-size: 12px; color: #555; }
.font-comments-grid { display: block; }
.font-comments-list { margin: 0 0 8px; }
.font-comment-card {
	padding: 6px 8px;
	margin: 0 0 6px;
	border: 1px solid #e2e2e2;
	background: #fafafa;
	font-size: 12px;
}
.font-comment-card-empty { color: #777; }

/* related fonts reuse .latest-fonts / .font-box */
.related-fonts-section { margin-top: 10px; }

/* ZIP download button (sits next to the primary Download button) */
.font-zip-button {
	background: #f0f0f0;
	border: 1px solid #bbb;
	color: #333;
}
.font-zip-button:hover { background: #e6e6e6; color: #000; }

/* Included styles grid */
.font-detail-styles {
	margin: 0 8px 8px;
	padding: 8px 10px;
	border: 1px solid #ddd;
	background: #fafafa;
}
.font-detail-styles-head h2 { margin: 0 0 2px; font-size: 14px; font-weight: bold; color: #cc0000; }
.font-detail-styles-head p { margin: 0 0 8px; font-size: 12px; color: #555; }
.font-style-preview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 6px;
}
.font-style-preview-card {
	padding: 8px 10px;
	border: 1px solid #e2e2e2;
	background: #fff;
	overflow: hidden;
}
.font-style-preview-meta {
	display: block;
	margin: 0 0 4px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #888;
}
.font-style-preview-value {
	display: block;
	font-size: 28px;
	line-height: 1.2;
	color: #000;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Character map */
.font-detail-glyphs {
	margin: 0 8px 8px;
	padding: 8px 10px;
	border: 1px solid #ddd;
	background: #fafafa;
}
.font-detail-glyphs-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
}
.font-detail-glyphs-head h2 { margin: 0 0 2px; font-size: 14px; font-weight: bold; color: #cc0000; }
.font-detail-glyphs-head p { margin: 0 0 6px; font-size: 12px; color: #555; }
.font-glyph-style-picker {
	font-size: 11px;
	color: #555;
	white-space: nowrap;
}
.font-glyph-style-picker select {
	margin-left: 4px;
	font-size: 11px;
	padding: 1px 2px;
	border: 1px solid #bbb;
	background: #fff;
}
.font-glyph-preview-input {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 8px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	background: #fff;
	font-size: 34px;
	line-height: 1.25;
	color: #000;
}
.font-glyph-sections {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 8px;
}
.font-glyph-card {
	padding: 6px 8px;
	border: 1px solid #e2e2e2;
	background: #fff;
}
.font-glyph-card h3 { margin: 0 0 6px; font-size: 12px; font-weight: bold; color: #333; }
/* Flowing glyph grid: each cell is only as wide as its glyph, at a uniform row
   height. Narrow glyphs (letters/digits) sit in compact min-width cells; wide
   glyphs — e.g. trial fonts whose digits are "personal use" banner art — get a
   proportionally larger cell so the whole glyph stays readable instead of being
   clipped or shrunk to nothing. Mirrors dafont's charmap layout. */
.font-glyph-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.font-glyph-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 42px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 4px 6px;
	border: 1px solid #eee;
	background: #fcfcfc;
	min-height: 50px;
	overflow: hidden; /* safety net for a glyph wider than the whole row */
}
.font-glyph-label {
	font-size: 9px;
	color: #aaa;
	font-family: Arial, sans-serif;
}
.font-glyph-value {
	font-size: 24px;
	line-height: 1;
	color: #000;
	font-weight: normal;
	white-space: nowrap;
	max-width: 100%;
}
/* "View all glyphs" link in the details character-map header */
.font-glyph-viewall {
	white-space: nowrap;
	font-weight: bold;
	color: #15489c;
}
/* Full-page character map (charmap.php): larger cells + glyphs so wide banner
   glyphs render big enough to read. */
.font-glyph-card-full { padding: 8px 10px; }
.font-glyph-card-full .font-glyph-grid { gap: 5px; }
.font-glyph-card-full .font-glyph-cell { min-width: 56px; min-height: 92px; padding: 6px 10px; }
.font-glyph-card-full .font-glyph-value { font-size: 46px; }
.font-glyph-card-full .font-glyph-label { margin-bottom: 2px; }
@media (max-width: 600px) {
	.font-glyph-preview-input { font-size: 24px; }
	.font-style-preview-value { font-size: 22px; }
	.font-glyph-card-full .font-glyph-cell { min-height: 74px; }
	.font-glyph-card-full .font-glyph-value { font-size: 38px; }
}

/* ==========================================================================
   Forms (contact / submit / comment / account)
   ========================================================================== */
.site-form-card {
	margin: 0 0 10px;
	padding: 10px;
	border: 1px solid #ccc;
	background: #fff;
}
.site-form-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.site-form-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 240px;
	min-width: 0;
}
.site-form-field-full { flex: 1 1 100%; }
.site-form-field label { font-size: 11px; font-weight: bold; color: #333; }
.site-form-field input,
.site-form-field textarea,
.site-form-field select,
.site-form-grid input,
.site-form-grid textarea,
.site-form-grid select {
	width: 100%;
	padding: 3px 6px;
	border: 1px solid #7f9db9;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	font-family: inherit;
	font-size: 12px;
	color: #000;
}
.site-form-field textarea { min-height: 70px; }
.site-form-honeypot,
.honeypot-field { display: none !important; }
.site-form-actions { flex: 1 1 100%; margin-top: 2px; }
.site-primary-action { padding: 3px 14px; font-size: 12px; }


/* generic bootstrap form-control fallback */
.form-control {
	border: 1px solid #7f9db9;
	border-radius: 0;
	box-shadow: none;
	font-size: 12px;
	color: #000;
}

/* account / admin */
.admin-shell { display: block; }
.admin-login-card {
	max-width: 360px;
	margin: 24px auto;
	padding: 14px;
	border: 1px solid #ccc;
	background: #fff;
}
.admin-login-form { display: block; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { margin-top: 14px; }
.footer-shell {
	padding: 10px 12px;
	background: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 0;
	box-shadow: none;
}
.footer-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}
.footer-brand-block { flex: 2 1 280px; min-width: 0; display: block; }
.footer-link-column { flex: 1 1 150px; min-width: 0; display: block; }
.footer-eyebrow,
.site-modal-eyebrow {
	margin: 0 0 2px;
	color: #cc0000;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}
.footer-brand-block h2,
.footer-link-column h2 {
	margin: 0 0 5px;
	font-family: inherit;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.3;
	color: #000;
}
.footer-copy { margin: 0 0 6px; font-size: 11px; line-height: 1.45; color: #444; }
.footer-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.footer-meta span {
	display: inline-block;
	padding: 1px 5px;
	border: 1px solid #ccc;
	border-radius: 0;
	background: #fff;
	color: #666;
	font-size: 10px;
	font-weight: normal;
}
.footer-link-column a,
.footer-back-to-top {
	display: block;
	padding: 1px 0;
	color: #15489c;
	font-weight: normal;
	font-size: 11px;
}

.footer-search-queries {
	margin-top: 10px;
	padding: 8px 12px;
	background: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}
.footer-search-queries h2 { margin: 0 0 5px; font-family: inherit; font-size: 13px; font-weight: bold; color: #cc0000; }
.search-queries { display: block; line-height: 1.7; }
.search-queries a,
.footer-link-column-queries .search-queries a {
	display: inline;
	padding: 0 6px 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #15489c;
	font-size: 11px;
	font-weight: normal;
}

.footer-bottom-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px solid #ccc;
}
.footer-visitors { margin: 0; font-size: 11px; color: #555; font-weight: normal; }
.footer-back-to-top {
	display: inline-block;
	padding: 1px 8px;
	border: 1px solid #aaa;
	border-radius: 0;
	background: #ececec;
	color: #000;
}
.top-symbol { display: none; }

.footer-box {
	margin: 8px 0 14px;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	text-align: center;
}
.footer-box a { margin-right: 16px; text-decoration: none; }

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-open { overflow: hidden; }
.site-modal[hidden] { display: none; }
.site-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.site-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.site-modal-dialog {
	position: relative;
	z-index: 1;
	width: min(680px, 100%);
	max-height: 88vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 2px solid #cc0000;
	border-radius: 0;
	box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.site-modal-header { padding: 8px 12px 0; }
.site-modal-header h2 { margin: 2px 0 4px; font-family: inherit; font-size: 16px; font-weight: bold; color: #000; }
.site-modal-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
	border: 1px solid #888;
	border-radius: 0;
	background: #ececec;
	color: #000;
	font-size: 16px;
	line-height: 1;
}
.site-modal-body { padding: 8px 12px 12px; overflow: auto; }
.site-modal-templates { display: none; }

.site-copy-block { display: block; color: #333; }
.site-copy-block h1,
.site-copy-block h2,
.site-copy-block h3,
.site-copy-block h4 {
	margin: 8px 0 4px;
	font-family: inherit;
	color: #cc0000;
}
.site-copy-block h1 { font-size: 17px; }
.site-copy-block h3 { font-size: 15px; }
.site-copy-block h2, .site-copy-block h4 { font-size: 13px; }
.site-copy-block p,
.site-copy-block ul { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: #333; }
.site-copy-block ul { padding-left: 18px; }

.site-faq-accordion details {
	margin: 0 0 4px;
	padding: 4px 6px;
	border: 1px solid #ddd;
	background: #fafafa;
}
.site-faq-accordion summary { font-size: 12px; font-weight: bold; cursor: pointer; }
.site-faq-accordion details p { margin: 4px 0 0; font-size: 12px; color: #444; }

/* ==========================================================================
   Helpers / Bootstrap overrides
   ========================================================================== */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	border: 0;
}
.strong, strong, b { font-weight: bold; }
.roboto { font-family: inherit; }

.glyphicon { font-size: 12px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 900px) {
	.top-categories .category-directory,
	.category-directory { flex-wrap: wrap; }
	.top-categories .category-column,
	.category-column {
		flex: 1 1 30%;
		border-right: 1px dotted #d8a3a3;
		border-bottom: 1px dotted #d8a3a3;
	}
	.font-box,
	.search-results-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 640px) {
	.main-container { padding: 6px 8px 24px; }

	/* --- compact mobile header --- */
	.site-header .navigation { padding: 6px 0; }
	.header-top-row {
		flex-wrap: wrap;
		gap: 4px;
		margin-bottom: 4px;
	}
	.header-brand { width: 100%; }
	.header-brand-row { gap: 8px; }
	/* tagline was crowding the logo on the right - drop it on phones */
	.brand-copy { display: none; }
	/* wide wordmark (intrinsic 300x22): constrain by an explicit width so it
	   never distorts or overflows; height stays proportional via height:auto */
	.dff-svg-logo {
		width: 270px;
		max-width: 90vw;
		height: auto;
	}

	.mobile-nav { display: block; margin: 6px 0; }
	.mobile-nav select {
		width: 100%;
		height: 32px;
		padding: 0 6px;
		border: 1px solid #7f9db9;
		border-radius: 0;
		font-size: 13px;
	}
	.desktop-category-nav { display: none; }

	/* search + alphabet sizing on phones */
	.category-search-row { margin: 2px 0 4px; }
	.header-search-input.form-control,
	input.header-search-input { width: 100%; max-width: none; }
	.search-input-shell { display: flex; gap: 6px; }
	.search-input-copy { flex: 1; }
	.header-search-button,
	.btn.header-search-button { padding: 1px 10px; }

	.alphabet-browser { margin: 4px 0; padding: 4px 0; }
	.azsort-scroll a { padding: 0 5px; font-size: 13px; line-height: 1.9; }

	.cst-sample { padding: 5px 6px; }
	.footer-grid { gap: 12px; }
	.category-column > .category-group-secondary:first-child { margin-top: 0; }
}

/* --- Language switcher + suggestion banner ------------------------------- */
.lang-switcher { display: inline-flex; align-items: center; margin: 0 0 0 10px; }
.lang-select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--surface-2, #f2f2f2) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center/10px 7px;
	border: 1px solid var(--border, #d5d5d5);
	border-radius: 6px;
	color: inherit;
	font: inherit;
	font-size: 13px;
	line-height: 1.4;
	padding: 5px 26px 5px 10px;
	cursor: pointer;
	max-width: 150px;
}
.lang-select:focus-visible { outline: 2px solid var(--accent, #e8730a); outline-offset: 2px; }

.lang-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	background: var(--surface-2, #fff6ec);
	border-bottom: 1px solid var(--border, #e6d6c4);
	font-size: 14px;
}
.lang-banner p { margin: 0; flex: 1 1 auto; }
.lang-banner a, .lang-banner button {
	font: inherit;
	border: 1px solid var(--border, #d5d5d5);
	background: transparent;
	border-radius: 5px;
	padding: 4px 12px;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}
.lang-banner a { background: var(--accent, #e8730a); border-color: transparent; color: #fff; }
@media (max-width: 600px) { .lang-select { max-width: 110px; } }

/* --- Admin: collapsed (approved) submissions ----------------------------- */
.admin-item-card-approved > summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 26px;
}
.admin-item-card-approved > summary::-webkit-details-marker { display: none; }
.admin-item-card-approved > summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .55;
	transition: transform .15s ease;
}
.admin-item-card-approved[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}
.admin-item-card-approved > summary:focus-visible {
	outline: 2px solid var(--accent, #e8730a);
	outline-offset: 2px;
}
/* Approved rows are done, so they sit back visually until opened. */
.admin-item-card-approved:not([open]) { opacity: .78; }
.admin-item-card-approved:not([open]):hover { opacity: 1; }

/* The switcher lives in .header-top-row, not .header-tools - that container is
   hidden by the classic restyle above. Pushed to the right of the brand. */
.header-top-row { flex-wrap: wrap; }
.header-top-row .lang-switcher { margin-left: auto; align-self: center; }

/* Mobile: keep the switcher on the same line as the logo instead of letting it
   claim a whole row. The logo is allowed to shrink (min-width:0 defeats the
   default flex min-content floor) and the control is made compact. */
@media (max-width: 640px) {
	.header-top-row {
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
	}
	.header-top-row .header-brand {
		min-width: 0;
		flex: 1 1 auto;
	}
	.header-top-row .header-brand .dff-svg-logo {
		max-width: 100%;
		height: auto;
	}
	.header-top-row .lang-switcher {
		flex: 0 0 auto;
		align-self: center;
	}
	.lang-select {
		max-width: 116px;
		font-size: 12px;
		padding: 4px 22px 4px 8px;
		background-position: right 6px center;
	}
}
@media (max-width: 380px) {
	.lang-select { max-width: 96px; font-size: 11px; }
}

/* --- Arabic (right-to-left) ---------------------------------------------- */
/* dir="rtl" on <html> already flips block flow and text alignment; these are
   the pieces that need explicit mirroring because they rely on physical
   left/right rather than logical start/end. */
[dir="rtl"] .header-top-row .lang-switcher { margin-left: 0; margin-right: auto; }
[dir="rtl"] .lang-select { padding: 5px 10px 5px 26px; background-position: left 8px center; }
[dir="rtl"] .alphabet-browser,
[dir="rtl"] .search-queries,
[dir="rtl"] .pagi { direction: rtl; }
/* Font names, file names and previews are Latin data, so keep them LTR inside
   an otherwise RTL page or they render with reversed punctuation. */
[dir="rtl"] .font-card-title,
[dir="rtl"] .font-detail-meta-card strong,
[dir="rtl"] .prev-img,
[dir="rtl"] code { direction: ltr; unicode-bidi: embed; text-align: start; }
[dir="rtl"] .admin-item-card-approved > summary { padding-right: 0; padding-left: 26px; }
[dir="rtl"] .admin-item-card-approved > summary::after { right: auto; left: 6px; }
/* package-only notice: its own full-width row at the bottom of the hero */
.font-detail-package-bar { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; font-size: 12px; line-height: 1.4; background: #fffbe6; border: 1px solid #e8d98a; border-radius: 4px; color: #5c4a00; }
.font-detail-package-icon { flex: 0 0 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c4a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5L12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5l9 4.5 9-4.5M12 12v9'/%3E%3C/svg%3E") center / 18px no-repeat; }
/* The category link reuses the card style (white text for the red card bar),
   which was invisible on the light details header. */
.font-detail-actions .font-card-category { align-self: center; color: #15489c; font-size: 12px; }
.font-detail-actions .font-card-category:hover { color: #15489c; text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Font submission form (submit.php)                                   */
/* ------------------------------------------------------------------ */
.dff-submit {
	--dff-accent: #cc0000;
	--dff-accent-soft: #fdf1f1;
	--dff-ink: #1f2328;
	--dff-muted: #6a737d;
	--dff-line: #d8dee4;
	--dff-surface: #ffffff;
	--dff-sunk: #f6f8fa;
	--dff-radius: 10px;
	color: var(--dff-ink);
	font-size: 13px;
	line-height: 1.45;
}
.dff-submit-head { margin: 0 0 14px; }
.dff-submit-head h3 { margin: 0 0 2px; font-size: 18px; font-weight: 700; color: var(--dff-ink); }
.dff-submit-head p { margin: 0; color: var(--dff-muted); }
.dff-submit-form { display: flex; flex-direction: column; gap: 12px; }

.dff-step {
	display: flex; flex-direction: column; gap: 10px;
	padding: 14px 16px 16px;
	background: var(--dff-surface);
	border: 1px solid var(--dff-line);
	border-radius: var(--dff-radius);
}
.dff-step h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; color: var(--dff-ink); }
.dff-step-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--dff-accent); color: #fff; font-size: 12px; font-weight: 700;
}

.dff-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.dff-row[hidden], .dff-submit [data-dff-panel][hidden] { display: none !important; }
.dff-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; font-weight: normal; }
.dff-field > span { font-size: 12px; font-weight: 600; color: var(--dff-ink); }
.dff-field em, .dff-step-optional { font-style: normal; font-weight: 400; color: var(--dff-muted); }
.dff-step-optional { font-size: 12px; }
.dff-field input[type=text], .dff-field input[type=email], .dff-field input[type=url], .dff-field textarea {
	width: 100%; box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--dff-line); border-radius: 7px;
	background: var(--dff-surface); color: var(--dff-ink);
	font: inherit; font-size: 13px; box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.dff-field textarea { min-height: 70px; resize: vertical; }
.dff-field input:focus, .dff-field textarea:focus { outline: none; border-color: var(--dff-accent); box-shadow: 0 0 0 3px rgba(204,0,0,.12); }

/* segmented toggle */
.dff-segmented { display: flex; padding: 3px; gap: 3px; background: var(--dff-sunk); border: 1px solid var(--dff-line); border-radius: 9px; }
.dff-segmented label { flex: 1; margin: 0; cursor: pointer; font-weight: normal; }
.dff-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.dff-segmented span { display: block; padding: 7px 10px; border-radius: 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--dff-muted); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.dff-segmented input:checked + span { background: var(--dff-surface); color: var(--dff-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.dff-segmented input:focus-visible + span { outline: 2px solid var(--dff-accent); outline-offset: 1px; }

/* drop zones: the real file input covers the zone, so click and drag-and-drop both work natively */
.dff-drop {
	position: relative; display: flex; align-items: center; gap: 12px;
	padding: 12px 14px; min-height: 58px; box-sizing: border-box;
	background: var(--dff-sunk);
	border: 1.5px dashed #b7c0ca; border-radius: 8px;
	transition: border-color .15s, background .15s;
}
.dff-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dff-drop:hover, .dff-drop.is-over { border-color: var(--dff-accent); background: var(--dff-accent-soft); }
.dff-drop:focus-within { border-color: var(--dff-accent); box-shadow: 0 0 0 3px rgba(204,0,0,.12); }
.dff-drop-icon { flex: 0 0 30px; height: 30px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cc0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.dff-drop-text { display: flex; flex-direction: column; min-width: 0; }
.dff-drop-text strong { font-size: 12px; font-weight: 600; color: var(--dff-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dff-drop-text small { font-size: 11px; color: var(--dff-muted); }
.dff-drop.is-filled { border-style: solid; border-color: #9fd3ad; background: #f0faf3; }
.dff-drop.is-filled .dff-drop-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7f37' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* distribution cards */
.dff-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.dff-card {
	position: relative; display: flex; align-items: center; gap: 12px; margin: 0;
	padding: 12px 14px; cursor: pointer; font-weight: normal;
	background: var(--dff-surface); border: 1.5px solid var(--dff-line); border-radius: 9px;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.dff-card:hover { border-color: #b7c0ca; }
.dff-card input { position: absolute; opacity: 0; pointer-events: none; }
.dff-card-icon { flex: 0 0 34px; height: 34px; border-radius: 8px; background: var(--dff-sunk) center / 20px no-repeat; }
.dff-card-icon-file { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M7 11l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E"); }
.dff-card-icon-package { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5L12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5l9 4.5 9-4.5M12 12v9'/%3E%3C/svg%3E"); }
.dff-card-text { display: flex; flex-direction: column; }
.dff-card-text strong { font-size: 13px; font-weight: 700; color: var(--dff-ink); }
.dff-card-text small { font-size: 11px; color: var(--dff-muted); }
.dff-card:has(input:checked) { border-color: var(--dff-accent); background: var(--dff-accent-soft); box-shadow: 0 0 0 1px var(--dff-accent) inset; }
.dff-card:has(input:checked) .dff-card-icon { background-color: #fff; }
.dff-card:has(input:focus-visible) { outline: 2px solid var(--dff-accent); outline-offset: 2px; }
.dff-note { margin: 0; padding: 8px 10px; font-size: 12px; background: #fff8e1; border: 1px solid #f0d98a; border-radius: 7px; color: #6b5200; }

.dff-submit-button {
	align-self: stretch; padding: 11px 16px;
	border: 0; border-radius: 9px; cursor: pointer;
	background: var(--dff-accent); color: #fff;
	font: inherit; font-size: 14px; font-weight: 700;
	box-shadow: 0 1px 2px rgba(0,0,0,.15);
	transition: background .15s, transform .05s;
}
.dff-submit-button:hover { background: #b00000; }
.dff-submit-button:active { transform: translateY(1px); }
.dff-submit-button:focus-visible { outline: 3px solid rgba(204,0,0,.35); outline-offset: 2px; }
.dff-submit .site-form-flash { border-radius: 8px; margin-bottom: 12px; }

/* submission thank-you page */
.dff-success { max-width: 520px; margin: 24px auto 32px; padding: 32px 28px; text-align: center; background: var(--dff-surface); border: 1px solid var(--dff-line); border-radius: 14px; }
.dff-success-icon { display: inline-block; width: 56px; height: 56px; margin-bottom: 12px; border-radius: 50%; background: #e7f6ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7f37' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 30px no-repeat; }
.dff-success h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--dff-ink); }
.dff-success p { margin: 0 auto 20px; max-width: 420px; color: var(--dff-muted); font-size: 13px; line-height: 1.55; }
.dff-success-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dff-success-actions .dff-submit-button { display: inline-block; align-self: center; padding: 11px 28px; text-decoration: none; }
.dff-success-actions .dff-submit-button:hover { color: #fff; text-decoration: none; }
.dff-success-secondary { font-size: 12px; color: var(--dff-muted); }

/* admin: bulk submission actions */
.admin-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; padding: 8px 10px; background: #f2f6fb; border: 1px solid #c5d3e2; }
.admin-bulk-all { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: bold; font-size: 12px; cursor: pointer; }
.admin-bulk-count { font-size: 12px; color: #555; }
.admin-bulk-buttons { display: inline-flex; gap: 6px; margin-left: auto; }
.admin-bulk-buttons button[disabled] { opacity: .5; cursor: not-allowed; }
.admin-bulk-check { display: inline-flex; align-items: center; margin: 0 4px 0 0; cursor: pointer; }
.admin-bulk-check input, .admin-bulk-all input { width: 15px; height: 15px; margin: 0; }
[dir="rtl"] .admin-bulk-buttons { margin-left: 0; margin-right: auto; }
.admin-item-date { font-size: 11px; color: #666; white-space: nowrap; }

/* ==========================================================================
   Font tools: compare page, favorites, card Save/Compare controls, tray.
   Same plain 2000s look as the rest: Verdana, square corners, grey bars,
   red section headings, no shadows or animation.
   ========================================================================== */

/* --- header links next to the search box --- */
.category-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.tool-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 12px; font-weight: bold; }
.tool-links a { color: #15489c; white-space: nowrap; }
.tool-links a.is-current { color: #cc0000; }
.tool-links [data-fav-count] { font-weight: normal; color: #555; }

/* --- Save star + Compare tick on font cards (hidden until JS is ready) --- */
.font-card-tools { display: none; align-items: center; gap: 7px; }
.dff-tools-ready .font-card-tools { display: inline-flex; }
.font-card-fav {
	padding: 0 1px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
.font-card-fav.is-on { color: #ffd84a; }
.font-card-fav:focus-visible, .font-card-compare input:focus-visible { outline: 1px dotted #fff; outline-offset: 1px; }
.font-card-compare {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin: 0;
	color: #fff;
	font-size: 11px;
	font-weight: normal;
	white-space: nowrap;
	cursor: pointer;
}
.font-card-compare input { width: 12px; height: 12px; margin: 0; cursor: pointer; }

/* details page: Save is JS-only, Compare is a plain link */
.dff-js-only { display: none !important; }
.dff-tools-ready .dff-js-only { display: inline-flex !important; }
.font-fav-button.is-on .font-card-fav-star { color: #d4a000; }

/* --- compare tray (fixed to the bottom while fonts are ticked) --- */
.dff-tray {
	position: fixed;
	z-index: 70;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	padding: 5px 12px;
	background: #f3f3f3;
	border-top: 2px solid #cc0000;
	font-size: 12px;
}
.dff-tray-label { color: #cc0000; white-space: nowrap; }
.dff-tray-items { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; min-width: 0; }
.dff-tray-item {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	max-width: 220px;
	padding: 0 2px 0 6px;
	border: 1px solid #ccc;
	background: #fff;
	font-size: 11px;
}
.dff-tray-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dff-tray-item button { padding: 0 3px; border: 0; background: none; color: #cc0000; font-size: 14px; font-weight: bold; line-height: 1; cursor: pointer; }
body.has-dff-tray { padding-bottom: 42px; }

/* --- compare page --- */
.dff-cmp { margin: 6px 0 0; }
.dff-cmp-head h1 { margin: 2px 0 3px; font-size: 18px; font-weight: bold; color: #cc0000; }
.dff-cmp-head p { margin: 0 0 8px; max-width: 900px; font-size: 12px; color: #333; }

.dff-cmp-drop {
	margin: 0 0 8px;
	padding: 5px 8px;
	border: 1px dashed #999;
	background: #fafafa;
	font-size: 12px;
}
.dff-cmp-drop > strong { color: #cc0000; }
.dff-cmp-drop .btn { vertical-align: baseline; }
.dff-cmp-drop-note { margin-left: 6px; font-size: 11px; color: #777; }
.dff-cmp-drop:target,
.dff-cmp.is-dragging .dff-cmp-drop { border-color: #cc0000; background: #fff7d6; }

.dff-cmp-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px;
	margin: 0 0 8px;
}
.dff-cmp-slot { min-width: 0; border: 1px solid #ccc; background: #fff; }
.dff-cmp-slot.is-empty { border-style: dashed; }
.dff-cmp-slot-head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 6px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}
.dff-cmp-slot-letter { flex: 0 0 auto; min-width: 16px; padding: 0 3px; background: #fff; font-size: 11px; text-align: center; }
.dff-cmp-slot-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dff-cmp-slot-x { flex: 0 0 auto; padding: 0 2px; border: 0; background: none; color: #fff; font-size: 16px; font-weight: bold; line-height: 1; cursor: pointer; }
.dff-cmp-slot-body { padding: 6px; font-size: 11px; color: #444; }
.dff-cmp-slot-meta { margin: 0 0 3px; overflow-wrap: anywhere; }
.dff-cmp-slot-style { margin: 0 0 3px; font-weight: normal; }
.dff-cmp-slot-style select { max-width: 100%; margin-left: 3px; border: 1px solid #bbb; font-size: 11px; }
.dff-cmp-slot-links { margin-top: 3px; }
.dff-cmp-slot-note { color: #1a7f37; }
.dff-cmp-slot-status { margin-top: 4px; color: #777; }
.dff-cmp-slot-status.is-error { color: #cc0000; }
.dff-cmp-linkbtn { padding: 0; border: 0; background: none; color: #15489c; font: inherit; cursor: pointer; }
.dff-cmp-linkbtn:hover { color: #cc0000; text-decoration: underline; }
.dff-cmp-linkbtn.is-on { color: #a07800; }
.dff-cmp-picker { position: relative; }
input.dff-cmp-search {
	width: 100%;
	height: 24px;
	padding: 2px 6px;
	border: 1px solid #7f9db9;
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 12px;
	-webkit-appearance: none;
	appearance: none;
}
input.dff-cmp-search:focus { outline: 1px solid #cc0000; }
.dff-cmp-suggest {
	position: absolute;
	z-index: 60;
	top: 25px;
	left: 0;
	right: 0;
	max-height: 250px;
	overflow-y: auto;
	padding: 2px;
	border: 1px solid #888;
	background: #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.dff-cmp-suggest-head { padding: 1px 4px 2px; font-size: 10px; font-weight: bold; color: #888; text-transform: uppercase; }
.dff-cmp-suggest-item {
	display: block;
	width: 100%;
	padding: 2px 5px;
	border: 0;
	background: #fff;
	color: #000;
	font-size: 12px;
	text-align: start;
	cursor: pointer;
}
.dff-cmp-suggest-item:hover,
.dff-cmp-suggest-item.is-active { background: #ffe9e9; }
.dff-cmp-suggest-empty { padding: 3px 5px; color: #777; }
.dff-cmp-or { margin-top: 5px; color: #666; }
.dff-cmp-add {
	min-height: 64px;
	border: 1px dashed #bbb;
	background: #fafafa;
	color: #15489c;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
}
.dff-cmp-add:hover { border-color: #cc0000; color: #cc0000; }

/* toolbar */
.dff-cmp-bar { margin: 0 0 8px; padding: 5px 8px; border: 1px solid #ccc; background: #f3f3f3; }
.dff-cmp-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; }
.dff-cmp-bar-row + .dff-cmp-bar-row { margin-top: 5px; }
.dff-cmp-field { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 11px; font-weight: normal; color: #333; }
.dff-cmp-field > span,
.dff-cmp-colors label > span { font-weight: bold; }
.dff-cmp-field-text { flex: 1 1 320px; }
.dff-cmp-field-text input {
	flex: 1;
	min-width: 120px;
	height: 24px;
	padding: 2px 6px;
	border: 1px solid #7f9db9;
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 12px;
}
.dff-cmp-field select { height: 22px; padding: 0 2px; border: 1px solid #7f9db9; border-radius: 0; background: #fff; font-size: 11px; }
.dff-cmp-field input[type="range"] { width: 100px; margin: 0; }
.dff-cmp-field output { min-width: 34px; color: #000; }
.dff-cmp-colors { flex-wrap: wrap; gap: 4px 8px; max-width: 100%; }
.dff-cmp-colors label { display: inline-flex; align-items: center; gap: 3px; margin: 0; font-weight: normal; }
.dff-cmp-colors input[type="color"] { width: 26px; height: 20px; padding: 0; border: 1px solid #888; border-radius: 0; background: #fff; cursor: pointer; }
.dff-cmp-contrast { padding: 0 5px; border: 1px solid #ccc; background: #fff; white-space: nowrap; }
.dff-cmp-contrast.is-ok { color: #1a7f37; }
.dff-cmp-contrast.is-mid { color: #b35c00; }
.dff-cmp-contrast.is-bad { color: #cc0000; }
.dff-cmp-reset { margin-inline-start: auto !important; }

/* view tabs */
.dff-cmp-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4px 8px;
	border-bottom: 2px solid #cc0000;
}
.dff-cmp-tablist { display: flex; flex-wrap: wrap; gap: 2px; }
.dff-cmp-tab {
	margin: 0;
	padding: 3px 10px;
	border: 1px solid #bbb;
	border-bottom: 0;
	background: #ececec;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
}
.dff-cmp-tab:hover { background: #e0e0e0; }
.dff-cmp-tab.is-active { border-color: #cc0000; background: #cc0000; color: #fff; }
.dff-cmp-actions { display: flex; gap: 4px; padding-bottom: 3px; }

/* stage */
.dff-cmp-stage {
	--cmp-size: 48px;
	--cmp-line: 1.2;
	--cmp-track: 0px;
	--cmp-case: none;
	--cmp-fg: #000;
	--cmp-bg: #fff;
	min-height: 120px;
	padding: 8px;
	border: 1px solid #ccc;
	border-top: 0;
	background: #fff;
}
.dff-cmp-empty { margin: 24px 0; color: #777; font-size: 12px; text-align: center; }
.dff-cmp-rows { display: grid; gap: 8px; }
.dff-cmp-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dff-cmp-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dff-cmp-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dff-cmp-row { min-width: 0; border: 1px solid #e2e2e2; }
.dff-cmp-row-head {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 2px 6px;
	border-left: 4px solid #ccc;
	background: #f7f7f7;
	font-size: 11px;
	overflow: hidden;
	white-space: nowrap;
}
.dff-cmp-row-head strong { overflow: hidden; text-overflow: ellipsis; }
.dff-cmp-badge { display: inline-block; min-width: 16px; padding: 0 3px; color: #fff; font-size: 11px; font-weight: bold; line-height: 15px; text-align: center; }
.dff-cmp-row-style { color: #777; font-weight: normal; }
.dff-cmp-text {
	min-height: 1.2em;
	padding: 6px 10px;
	background: var(--cmp-bg);
	color: var(--cmp-fg);
	font-size: var(--cmp-size);
	line-height: var(--cmp-line);
	letter-spacing: var(--cmp-track);
	text-transform: var(--cmp-case);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	outline: none;
	cursor: text;
}
.dff-cmp-text:focus { box-shadow: inset 0 0 0 1px #7f9db9; }
.dff-cmp-wait { padding: 12px 10px; color: #777; font-size: 12px; }
.dff-cmp-wait.is-error { color: #cc0000; }
.dff-cmp-wait img { display: block; max-width: 100%; height: auto; margin-top: 6px; }
.dff-cmp-missing { padding: 2px 10px 3px; border-top: 1px solid #f0e3a8; background: #fffbe6; color: #8a5a00; font-size: 11px; }

.dff-cmp-subbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 6px; font-size: 11px; }
.dff-cmp-subbar label { margin: 0; font-weight: bold; }
.dff-cmp-subbar select { max-width: 220px; margin-left: 3px; border: 1px solid #7f9db9; font-size: 11px; font-weight: normal; }
.dff-cmp-sim { color: #cc0000; }
.dff-cmp-legend { margin: 6px 0 0; font-size: 11px; color: #444; }

/* overlay: two layers on one baseline */
/* Both layers sit in one grid cell, so they share an origin in LTR and RTL
   pages alike and the box grows to the wider of the two. */
.dff-cmp-ov { display: grid; align-items: baseline; padding: 10px; border: 1px solid #e2e2e2; background: var(--cmp-bg); overflow-x: auto; }
.dff-cmp-ov-layer {
	grid-area: 1 / 1;
	font-size: var(--cmp-size);
	line-height: var(--cmp-line);
	letter-spacing: var(--cmp-track);
	text-transform: var(--cmp-case);
	white-space: pre;
	opacity: .8;
}
.dff-cmp-ov-top { mix-blend-mode: multiply; }
.dff-cmp-ov.is-dark .dff-cmp-ov-top { mix-blend-mode: screen; }

/* glyphs */
.dff-cmp-glyphs { display: flex; flex-wrap: wrap; gap: 4px; }
.dff-cmp-gcell {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 44px;
	padding: 2px 6px 4px;
	border: 1px solid #eee;
	background: #fcfcfc;
}
.dff-cmp-glabel { font-family: Arial, sans-serif; font-size: 9px; color: #aaa; }
.dff-cmp-gset { display: flex; align-items: baseline; gap: 8px; }
.dff-cmp-g { color: var(--cmp-fg); font-size: var(--cmp-g, 32px); line-height: 1.2; }
.dff-cmp-g.is-missing,
.dff-cmp-g.is-wait { color: #ccc !important; font-family: Arial, sans-serif; font-size: 14px; }

/* waterfall */
.dff-cmp-wf { background: var(--cmp-bg); }
.dff-cmp-wf-line {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 1px 8px;
	border-top: 1px dotted #e6e6e6;
	overflow: hidden;
	white-space: nowrap;
}
.dff-cmp-wf-size { flex: 0 0 34px; color: #999; font-family: Verdana, sans-serif; font-size: 10px; text-align: end; }
.dff-cmp-wf-text { overflow: hidden; text-overflow: ellipsis; color: var(--cmp-fg); letter-spacing: var(--cmp-track); text-transform: var(--cmp-case); line-height: 1.25; }

/* pairing */
.dff-cmp-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; align-items: start; }
.dff-cmp-pair-article { padding: 16px 20px; border: 1px solid #e2e2e2; background: var(--cmp-bg); color: var(--cmp-fg); }
.dff-cmp-pair-article h3 { margin: 0 0 6px; font-size: 34px; font-weight: normal; line-height: 1.15; overflow-wrap: anywhere; }
.dff-cmp-pair-article h4 { margin: 0 0 12px; font-size: 18px; font-weight: normal; line-height: 1.3; opacity: .8; }
.dff-cmp-pair-article p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.dff-cmp-pair-article .dff-cmp-pair-small { font-size: 12px; opacity: .75; }
.dff-cmp-pair-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 1.75;
	padding: 18px 22px;
	border: 1px solid #ccc;
	background: var(--cmp-bg);
	color: var(--cmp-fg);
}
.dff-cmp-pair-name { font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; }
.dff-cmp-pair-role { margin: 4px 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.dff-cmp-pair-card hr { margin: 0 0 10px; border: 0; border-top: 1px solid currentColor; opacity: .3; }
.dff-cmp-pair-contact { font-size: 12px; line-height: 1.6; }

.dff-cmp-status { margin: 4px 0 0; padding: 3px 8px; border: 1px solid #b7d7b7; background: #effaef; color: #1a5c1a; font-size: 11px; }

/* font facts table */
.dff-cmp-specs,
.dff-cmp-help { margin: 10px 0 0; padding: 8px 10px; border: 1px solid #ddd; background: #fafafa; }
.dff-cmp-specs h2,
.dff-cmp-help h2 { margin: 0 0 2px; font-size: 14px; font-weight: bold; color: #cc0000; }
.dff-cmp-specs > p { margin: 0 0 6px; font-size: 11px; color: #666; }
.dff-cmp-specs-scroll { overflow-x: auto; }
.dff-cmp-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 11px; }
.dff-cmp-table th,
.dff-cmp-table td { padding: 3px 6px; border: 1px solid #e2e2e2; text-align: start; vertical-align: top; }
.dff-cmp-table thead th { background: #f3f3f3; font-size: 12px; white-space: nowrap; }
.dff-cmp-table tbody th { width: 190px; min-width: 120px; background: #fcfcfc; color: #555; font-weight: normal; }
.dff-cmp-table tbody td { min-width: 120px; }
.dff-cmp-table .dff-cmp-group th { background: #eee; color: #cc0000; font-size: 10px; font-weight: bold; text-transform: uppercase; }
.dff-cmp-yes { color: #1a7f37; }
.dff-cmp-no { color: #cc0000; }
.dff-cmp-part { color: #b35c00; }
.dff-cmp-na { color: #aaa; }
.dff-cmp-tags { color: #333; font-family: Consolas, Menlo, monospace; font-size: 10px; overflow-wrap: anywhere; }
.dff-cmp-barbox { display: inline-block; width: 56px; height: 7px; margin-inline-end: 5px; border: 1px solid #bbb; background: #fff; vertical-align: middle; }
.dff-cmp-barfill { display: block; height: 100%; background: #888; }

.dff-cmp-help { background: #fff; font-size: 12px; }
.dff-cmp-help ol { margin: 4px 0 0; padding-inline-start: 20px; }
.dff-cmp-help li { margin: 0 0 3px; }

/* favorites page */
.dff-favs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 6px; font-size: 12px; color: #555; }
.dff-favs-bar:empty { display: none; }
.dff-favs-note { margin: 0 0 6px; padding: 3px 8px; border: 1px solid #f0e3a8; background: #fffbe6; color: #8a5a00; font-size: 11px; }
.dff-favs-empty { grid-column: 1 / -1; margin: 16px 0; color: #777; font-size: 12px; }
.dff-favs-more { margin: 8px 0 0; text-align: center; }

@media (max-width: 900px) {
	.dff-cmp-cols-3,
	.dff-cmp-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.tool-links { gap: 2px 10px; font-size: 12px; }
	.dff-cmp-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.dff-cmp-cols-2,
	.dff-cmp-cols-3,
	.dff-cmp-cols-4,
	.dff-cmp-pair { grid-template-columns: 1fr; }
	.dff-cmp-field input[type="range"] { width: 84px; }
	.dff-cmp-reset { margin-inline-start: 0 !important; }
	.dff-cmp-drop-note { display: block; margin: 2px 0 0; }
	.dff-cmp-pair-article h3 { font-size: 26px; }
	.dff-cmp-table tbody th { width: 104px; min-width: 96px; }
	.dff-cmp-table tbody td { min-width: 112px; }
	.font-card-tools { gap: 5px; }
	.dff-tray { padding: 4px 8px; }
	.dff-tray-items { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; }
	.dff-tray-item { flex: 0 0 auto; }
	body.has-dff-tray { padding-bottom: 64px; }
}
@media (max-width: 480px) {
	/* phones: the bare tick box, so the font name keeps its room; the tray
	   that appears on the first tick says what it does */
	.font-card-compare { font-size: 0; gap: 0; }
	.font-card-compare input { width: 14px; height: 14px; }
}
@media (max-width: 420px) {
	.dff-cmp-slots { grid-template-columns: 1fr; }
}
/* Bootstrap 3 gives input[type=file] display:block, which beats [hidden]. */
input.dff-cmp-file { display: none !important; }
.dff-tray-msg { padding: 0 6px; border: 1px solid #e0b4b4; background: #fff5f5; color: #cc0000; font-size: 11px; }
/* a thin rule between the Save/Compare controls and the category name */
.dff-tools-ready .font-card-actions .font-card-tools { padding-inline-end: 7px; border-inline-end: 1px solid rgba(255,255,255,.45); }
/* .btn's display:inline-flex outranks the [hidden] attribute. */
.dff-favs [hidden],
.dff-cmp [hidden] { display: none !important; }
/* Values are mostly Latin data ("61 KB", "400 Regular"); let each cell take
   its own direction so an Arabic page does not print them as "KB 61". */
.dff-cmp-table td,
.dff-cmp-table thead th,
.dff-cmp-slot-meta { unicode-bidi: plaintext; }
[dir="rtl"] .dff-cmp-table td,
[dir="rtl"] .dff-cmp-table thead th { text-align: right; }

/* ==========================================================================
   Designer accounts: sign-in pages, dashboard, designer pages, admin sections.
   Same flat 2000s look: grey panels, red headings, square corners.
   ========================================================================== */
.dff-muted { color: #777; }
.dff-linkbtn { padding: 0; border: 0; background: none; color: #15489c; font: inherit; cursor: pointer; }
.dff-linkbtn:hover { color: #cc0000; text-decoration: underline; }
.dff-inline-form { display: inline; margin: 0; }
.dff-acct-flash { margin: 6px 0; }

/* header: account links after the tool links */
.tool-account { display: inline-flex; align-items: center; gap: 2px 10px; padding-inline-start: 10px; border-inline-start: 1px solid #ccc; }
.tool-logout { display: inline; margin: 0; }
.tool-logout .dff-linkbtn { font-size: 12px; font-weight: bold; }

/* designer names on font cards (white on the red title bar) */
.font-card-copy a.font-card-creator { color: #fff; font-weight: normal; }
.font-card-copy a.font-card-creator:hover { color: #fff; text-decoration: underline; }
.font-detail-creator { font-weight: bold; }
.dff-verified { color: #1a7f37; font-size: 11px; font-weight: bold; white-space: nowrap; }
.dff-owner-note { margin: 8px 0 0; padding-top: 6px; border-top: 1px dotted #ddd; font-size: 12px; }
.dff-search-designers { margin: 0 0 8px; padding: 4px 8px; border: 1px solid #ddd; background: #fafafa; font-size: 12px; }
.dff-submit-as, .dff-contact-as { margin: 4px 0 0; font-size: 12px; color: #555; }

/* --- sign in / register / forgot / reset --- */
.dff-auth { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin: 10px 0; }
.dff-auth-card { flex: 1 1 380px; max-width: 520px; padding: 12px 14px; border: 1px solid #ccc; background: #fff; }
.dff-auth-card h1 { margin: 0 0 4px; font-size: 18px; font-weight: bold; color: #cc0000; }
.dff-auth-intro { margin: 0 0 10px; font-size: 12px; color: #444; }
.dff-auth-form { display: flex; flex-direction: column; gap: 8px; }
.dff-auth-field { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 11px; font-weight: bold; color: #333; }
.dff-auth-field input { height: 26px; padding: 2px 6px; border: 1px solid #7f9db9; border-radius: 0; font-family: inherit; font-size: 13px; font-weight: normal; }
.dff-auth-field input:focus { outline: 1px solid #cc0000; }
.dff-auth-field small { font-weight: normal; color: #777; }
.dff-auth-check { display: flex; align-items: flex-start; gap: 5px; margin: 0; font-size: 12px; font-weight: normal; }
.dff-auth-check input { margin-top: 2px; }
.dff-auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; }
.dff-auth-switch { margin: 10px 0 0; padding-top: 8px; border-top: 1px dotted #ddd; font-size: 12px; }
.dff-auth-aside { flex: 1 1 260px; max-width: 360px; padding: 10px 12px; border: 1px solid #ddd; background: #fafafa; font-size: 12px; }
.dff-auth-aside h2 { margin: 0 0 6px; font-size: 14px; font-weight: bold; color: #cc0000; }
.dff-auth-aside ul { margin: 0 0 8px; padding-inline-start: 18px; }
.dff-auth-aside li { margin: 0 0 3px; }

/* --- dashboard --- */
.dff-dash { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.dff-dash-nav { flex: 0 0 200px; border: 1px solid #ccc; background: #f3f3f3; font-size: 12px; }
.dff-dash-me { display: flex; align-items: center; gap: 6px; padding: 6px; border-bottom: 2px solid #cc0000; background: #fff; }
.dff-dash-me span { display: flex; flex-direction: column; min-width: 0; }
.dff-dash-me strong, .dff-dash-me small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dff-dash-me small { color: #777; font-size: 10px; }
.dff-dash-nav nav a { display: block; padding: 4px 8px; border-bottom: 1px solid #e2e2e2; color: #15489c; font-weight: bold; }
.dff-dash-nav nav a.is-active { background: #cc0000; color: #fff; }
.dff-dash-nav nav a:hover { text-decoration: none; background: #e9e9e9; }
.dff-dash-nav nav a.is-active:hover { background: #b80000; }
.dff-dash-count { display: inline-block; min-width: 16px; padding: 0 4px; background: #cc0000; color: #fff; font-size: 10px; text-align: center; }
.dff-dash-nav nav a.is-active .dff-dash-count { background: #fff; color: #cc0000; }
.dff-dash-signout { padding: 6px 8px; margin: 0; }
.dff-dash-main { flex: 1 1 auto; min-width: 0; }
.dff-dash-main h1 { margin: 0 0 6px; font-size: 18px; font-weight: bold; color: #cc0000; }
.dff-dash-main h1 small { font-size: 12px; color: #777; font-weight: normal; }
.dff-dash-main > p { font-size: 12px; }
.dff-dash-notice { margin: 0 0 8px; padding: 5px 8px; border: 1px solid #f0e3a8; background: #fffbe6; color: #5a4400; font-size: 12px; }
.dff-crumb { margin: 0 0 2px; font-size: 11px; }
.dff-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
.dff-stat { padding: 6px 8px; border: 1px solid #ddd; background: #fff; }
.dff-stat span { display: block; font-size: 10px; text-transform: uppercase; color: #888; }
.dff-stat strong { font-size: 18px; color: #000; }
.dff-dash-panel { margin: 0 0 8px; padding: 8px 10px; border: 1px solid #ddd; background: #fafafa; }
.dff-dash-panel h2 { margin: 0 0 6px; font-size: 14px; font-weight: bold; color: #cc0000; }
.dff-dash-panel h2 small { color: #777; font-weight: normal; }
.dff-dash-empty { background: #fff; }
/* Time runs left to right in every locale, RTL included, so the date labels
   must not flip while the bars stay put. */
.dff-chart { position: relative; margin: 0 0 8px; padding-top: 14px; direction: ltr; }
.dff-acct-chart { display: block; width: 100%; height: 96px; background: #fff; border: 1px solid #e2e2e2; }
.dff-chart-max { position: absolute; top: 0; left: 0; font-size: 10px; line-height: 12px; color: #777; }
.dff-chart-axis { display: flex; justify-content: space-between; font-size: 10px; color: #777; margin-top: 2px; }
.dff-dash-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; }
.dff-dash-toolbar select { height: 22px; margin-inline-start: 4px; border: 1px solid #7f9db9; font-size: 12px; }
.dff-dash-list { margin: 0; padding-inline-start: 18px; font-size: 12px; }
.dff-dash-comment { padding: 4px 0; border-top: 1px dotted #ddd; font-size: 12px; }
.dff-dash-comment p { margin: 2px 0 0; color: #333; }
.dff-table-scroll { overflow-x: auto; }
.dff-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 12px; }
.dff-table th, .dff-table td { padding: 4px 6px; border: 1px solid #e2e2e2; text-align: start; vertical-align: top; }
.dff-table thead th { background: #f3f3f3; font-size: 11px; }
.dff-table tr.is-unread td { background: #fffbe6; font-weight: bold; }
.dff-td-font { min-width: 220px; }
.dff-dash-thumb { display: block; max-width: 180px; max-height: 40px; margin: 0 0 3px; border: 1px solid #eee; background: #fff; }
.dff-td-actions a { display: inline-block; margin-inline-end: 8px; white-space: nowrap; }
.dff-badge { display: inline-block; padding: 0 5px; border: 1px solid #ccc; background: #f3f3f3; color: #333; font-size: 10px; font-weight: bold; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.dff-badge-live, .dff-badge-sub_approved, .dff-badge-claim_approved, .dff-badge-ticket_answered, .dff-badge-verified { border-color: #a6d8a6; background: #effaef; color: #1a5c1a; }
.dff-badge-hidden_owner, .dff-badge-sub_pending, .dff-badge-claim_pending, .dff-badge-claim_partial, .dff-badge-ticket_open, .dff-badge-ticket_new, .dff-badge-unverified, .dff-badge-new { border-color: #f0d78c; background: #fffbe6; color: #6a5000; }
.dff-badge-hidden_admin, .dff-badge-sub_rejected, .dff-badge-claim_rejected { border-color: #e0b4b4; background: #fff5f5; color: #a00; }
.dff-pager { margin: 6px 0; font-size: 12px; }
.dff-dash-font-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 8px; font-size: 12px; }
.dff-dash-font-head .dff-dash-thumb { max-width: 320px; max-height: 70px; }
.dff-form { display: flex; flex-direction: column; gap: 8px; }
.dff-field { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 11px; font-weight: bold; color: #333; }
.dff-field input[type="text"], .dff-field input[type="email"], .dff-field input[type="url"], .dff-field input[type="password"], .dff-field input[type="search"], .dff-field select, .dff-field textarea {
	max-width: 640px; padding: 3px 6px; border: 1px solid #7f9db9; border-radius: 0; background: #fff; font-family: inherit; font-size: 12px; font-weight: normal;
}
.dff-field input, .dff-field select { height: 26px; }
.dff-field small { font-weight: normal; color: #777; }
.dff-check { display: flex; align-items: flex-start; gap: 5px; margin: 0; font-size: 12px; font-weight: normal; }
.dff-check input { margin-top: 2px; }
.dff-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dff-dash-search { display: flex; gap: 4px; margin: 0 0 8px; }
.dff-dash-search input { flex: 0 1 360px; height: 26px; padding: 2px 6px; border: 1px solid #7f9db9; border-radius: 0; font-size: 12px; }
.dff-claim-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px; max-height: 520px; overflow-y: auto; padding: 4px; border: 1px solid #e2e2e2; background: #fff; }
.dff-claim-list.is-disabled { opacity: .45; pointer-events: none; }
.dff-claim-selectall { grid-column: 1 / -1; padding: 2px 4px; background: #f3f3f3; }
.dff-claim-item { display: flex; align-items: flex-start; gap: 5px; margin: 0; padding: 4px; border: 1px solid #eee; font-size: 11px; font-weight: normal; cursor: pointer; }
.dff-claim-item:hover { background: #fafafa; }
.dff-claim-item .dff-dash-thumb { max-width: 110px; max-height: 26px; margin: 0; }
.dff-claim-item span { display: flex; flex-direction: column; min-width: 0; }
.dff-claim-item small { color: #777; }
.dff-claim-item.is-owned { opacity: .55; cursor: default; }
.dff-thread { margin: 0 0 8px; }
.dff-thread-msg { margin: 0 0 6px; padding: 6px 8px; border: 1px solid #ddd; background: #fff; font-size: 12px; }
.dff-thread-msg header { margin: 0 0 3px; }
.dff-thread-msg p { margin: 0; }
.dff-thread-admin { border-inline-start: 4px solid #cc0000; background: #fff8f8; }
.dff-thread-user { border-inline-start: 4px solid #15489c; }
.dff-profile-avatar { display: flex; align-items: center; gap: 10px; }
.dff-avatar { display: inline-block; flex: 0 0 auto; border: 1px solid #ccc; background: #fff; object-fit: cover; }
.dff-avatar-empty { background: #cc0000; color: #fff; font-weight: bold; text-align: center; font-size: 16px; }
.dff-danger-zone { border-color: #e0b4b4; background: #fff8f8; }

/* --- designer page and directory --- */
.dff-designer { margin: 8px 0; }
.dff-designer-head { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 8px; padding: 10px; border: 1px solid #ccc; background: #f7f7f7; }
.dff-designer-copy { min-width: 0; }
.dff-designer-head h1 { margin: 2px 0 3px; font-size: 18px; font-weight: bold; color: #cc0000; }
.dff-designer-stats { margin: 0 0 4px; font-size: 12px; color: #555; }
.dff-designer-bio { margin: 0 0 4px; font-size: 12px; color: #333; max-width: 860px; }
.dff-designer-links, .dff-designer-claim { margin: 0; font-size: 12px; }
.dff-designer-sort { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 8px; border-bottom: 2px solid #cc0000; }
.dff-designer-sort a { padding: 2px 10px; border: 1px solid #bbb; border-bottom: 0; background: #ececec; color: #000; font-size: 12px; font-weight: bold; }
.dff-designer-sort a.is-active { border-color: #cc0000; background: #cc0000; color: #fff; }
.dff-designer-sort a:hover { text-decoration: none; }
.dff-designer-foot { margin: 8px 0 0; font-size: 12px; }
.dff-designers h1 { margin: 2px 0 3px; font-size: 18px; font-weight: bold; color: #cc0000; }
.dff-designers-az a.is-current { color: #cc0000; text-decoration: underline; }
.dff-designers-cols { margin: 0; padding: 0; list-style: none; columns: 4 200px; column-gap: 16px; font-size: 12px; }
.dff-designers-cols li { margin: 0 0 2px; break-inside: avoid; }
.dff-more-by .page-header h2 { margin: 2px 0; font-size: 15px; font-weight: bold; color: #cc0000; }

/* --- admin sections --- */
.adm-nav { display: flex; flex-wrap: wrap; gap: 2px; margin: 8px 0; border-bottom: 2px solid #cc0000; }
.adm-nav a { padding: 3px 10px; border: 1px solid #bbb; border-bottom: 0; background: #ececec; color: #000; font-size: 12px; font-weight: bold; }
.adm-nav a.is-active { border-color: #cc0000; background: #cc0000; color: #fff; }
.adm-nav a:hover { text-decoration: none; }
.adm { font-size: 12px; }
.adm h2 { font-size: 16px; font-weight: bold; color: #cc0000; }
.adm h3 { margin: 12px 0 4px; font-size: 13px; font-weight: bold; }
.adm-muted { color: #777; }
.adm-filter a { margin-inline-end: 8px; }
.adm-filter a.is-active { color: #cc0000; font-weight: bold; }
.adm-table { width: 100%; margin: 6px 0; border-collapse: collapse; background: #fff; }
.adm-table th, .adm-table td { padding: 3px 6px; border: 1px solid #e2e2e2; text-align: start; vertical-align: top; }
.adm-table thead th { background: #f3f3f3; }
.adm-diff { max-width: 260px; overflow-wrap: anywhere; color: #444; }
.adm-pre { max-width: 520px; white-space: pre-wrap; font-size: 11px; }
.adm-thread { margin: 6px 0 10px; }
.adm-msg { margin: 0 0 6px; padding: 6px 8px; border: 1px solid #ddd; background: #fff; }
.adm-msg p { margin: 0; }
.adm-msg-admin { border-inline-start: 4px solid #cc0000; background: #fff8f8; }
.adm-msg-user { border-inline-start: 4px solid #15489c; }
.adm-form { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.adm-form label { display: flex; flex-direction: column; gap: 2px; font-weight: bold; }
.adm-form textarea, .adm-form input[type="text"] { padding: 3px 6px; border: 1px solid #7f9db9; font: inherit; font-weight: normal; }
.adm-form label.adm-check, .adm-check { flex-direction: row; align-items: center; gap: 5px; font-weight: normal; }
.adm-form .site-primary-action { align-self: flex-start; }
.adm-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 6px 2px 0; }
.adm-inline input[type="text"], .adm-inline input[type="email"], .adm-inline input[type="search"], .adm-inline select { height: 22px; padding: 1px 4px; border: 1px solid #7f9db9; font-size: 12px; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.adm-claim { margin: 0 0 6px; }
.adm-headlink { margin-inline-start: 8px; font-size: 11px; font-weight: normal; }

@media (max-width: 760px) {
	.dff-dash { flex-direction: column; }
	.dff-dash-nav { flex: 0 0 auto; width: 100%; }
	.dff-dash-nav nav { display: flex; flex-wrap: wrap; }
	.dff-dash-nav nav a { flex: 1 1 auto; border-inline-end: 1px solid #e2e2e2; }
	.dff-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dff-designer-head { flex-direction: column; }
}
@media (max-width: 640px) {
	.tool-account { padding-inline-start: 0; border-inline-start: 0; }
	.dff-auth-card, .dff-auth-aside { max-width: none; }
}
/* Unread ticket replies, next to "Dashboard" in the header. */
.dff-hdr-badge { display: inline-block; min-width: 14px; padding: 0 4px; border-radius: 7px; background: #c00; color: #fff; font-size: 10px; font-weight: bold; line-height: 14px; text-align: center; vertical-align: 1px; }