/*
 * uj.css - UJ Archive design system
 * Stile: Dark Mode (OLED) - accento oro dal logo Umbria Jazz
 * vim: tabstop=4:shiftwidth=4
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Righteous&display=swap');

/* ===========================================================================
   1. Token
   =========================================================================== */
:root {
	color-scheme: dark;				/* controlli nativi (audio, scrollbar) in tema scuro */

	/* Superfici */
	--uj-bg:			#09090B;
	--uj-bg-grad:		radial-gradient(1200px 600px at 50% -200px, #18140A 0%, #09090B 70%);
	--uj-surface:		#131316;
	--uj-surface-2:		#1B1B20;
	--uj-surface-3:		#24242B;
	--uj-border:		#2A2A32;
	--uj-border-strong:	#3C3C47;

	/* Testo */
	--uj-fg:			#F4F4F5;
	--uj-fg-muted:		#A8A8B3;
	--uj-fg-dim:		#8A8A94;

	/* Accento (oro del logo UJ) */
	--uj-accent:		#FCBF2B;
	--uj-accent-hi:		#FFD467;
	--uj-accent-soft:	rgba(252,191,43,.13);
	--uj-accent-line:	rgba(252,191,43,.34);
	--uj-on-accent:		#1A1405;

	/* Semantici */
	--uj-danger:		#F87171;
	--uj-danger-soft:	rgba(248,113,113,.12);

	/* Spaziature (densità 7/10) */
	--uj-s1: 4px;  --uj-s2: 8px;  --uj-s3: 12px;
	--uj-s4: 16px; --uj-s5: 24px; --uj-s6: 32px;

	/* Forme */
	--uj-r-sm: 6px; --uj-r-md: 10px; --uj-r-lg: 14px; --uj-r-pill: 999px;

	/* Elevazione */
	--uj-sh-1: 0 1px 2px rgba(0,0,0,.6);
	--uj-sh-2: 0 6px 20px -6px rgba(0,0,0,.75);
	--uj-sh-3: 0 -8px 32px -8px rgba(0,0,0,.9);

	/* Motion */
	--uj-t-fast: 140ms cubic-bezier(.4,0,.2,1);
	--uj-t-base: 220ms cubic-bezier(.4,0,.2,1);
	--uj-t-slow: 380ms cubic-bezier(.22,1,.36,1);
}

/* ===========================================================================
   2. Base
   =========================================================================== */
html, body.black {
	background: var(--uj-bg);
	background-image: var(--uj-bg-grad);
	background-attachment: fixed;
	color: var(--uj-fg);
	font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.uj ::selection { background: var(--uj-accent); color: var(--uj-on-accent); }

.uj {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--uj-s4) var(--uj-s6);
}

/* Focus visibile ovunque (WCAG 2.4.7) */
.uj :focus-visible,
.uj a:focus-visible,
.uj button:focus-visible,
.uj input:focus-visible,
.uj [tabindex]:focus-visible {
	outline: 2px solid var(--uj-accent);
	outline-offset: 2px;
	border-radius: var(--uj-r-sm);
}
/* Fallback per browser senza :focus-visible */
.uj a:focus, .uj button:focus, .uj input:focus { outline-color: var(--uj-accent); }

.uj-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===========================================================================
   3. Intestazione
   =========================================================================== */
.uj-head {
	display: flex;
	align-items: center;
	gap: var(--uj-s4);
	padding: var(--uj-s5) 0 var(--uj-s4);
	border-bottom: 1px solid var(--uj-border);
	margin-bottom: var(--uj-s5);
}
.uj-head img {
	width: 44px; height: auto;
	filter: drop-shadow(0 0 14px rgba(252,191,43,.25));
}
.uj-head h1 {
	font-family: Righteous, Poppins, sans-serif;
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: .5px;
	margin: 0;
	color: var(--uj-fg);
}
.uj-head h1 span { color: var(--uj-accent); }
.uj-head p {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--uj-fg-dim);
}
.uj-head-stats {
	margin-left: auto;
	display: flex;
	gap: var(--uj-s5);
	text-align: right;
}
.uj-head-stats b {
	display: block;
	font-family: Righteous, Poppins, sans-serif;
	font-size: 20px;
	font-weight: 400;
	color: var(--uj-accent);
	line-height: 1.2;
}
.uj-head-stats small {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .9px;
	color: var(--uj-fg-dim);
}

/* ===========================================================================
   4. Pannello di ricerca
   =========================================================================== */
.uj-search {
	background: linear-gradient(180deg, var(--uj-surface-2), var(--uj-surface));
	border: 1px solid var(--uj-border);
	border-radius: var(--uj-r-lg);
	box-shadow: var(--uj-sh-2);
	padding: var(--uj-s5);
	margin-bottom: var(--uj-s5);
}
.uj-grid {
	display: grid;
	/* Concerto | Artista | Luogo | Edizione | Periodo */
	grid-template-columns:
		minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr) minmax(0,1.15fr);
	gap: var(--uj-s4);
}
.uj-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.uj-field > label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .9px;
	color: var(--uj-fg-dim);
	margin: 0;
}
.uj-lbl-hint { font-weight: 400; letter-spacing: .4px; opacity: .65; text-transform: none; }
.uj-field .uj-dates { display: flex; gap: var(--uj-s2); }
.uj-field .uj-dates input { min-width: 0; }

.uj input[type=text] {
	width: 100%;
	height: 44px;					/* target touch >= 44px */
	padding: 0 var(--uj-s3);
	background: var(--uj-bg);
	border: 1px solid var(--uj-border);
	border-radius: var(--uj-r-md);
	color: var(--uj-fg);
	font: inherit;
	font-size: 15px;
	transition: border-color var(--uj-t-fast), box-shadow var(--uj-t-fast), background var(--uj-t-fast);
}
.uj input[type=text]::placeholder { color: #85858F; }
.uj input[type=text]:hover { border-color: var(--uj-border-strong); }
.uj input[type=text]:focus {
	border-color: var(--uj-accent);
	box-shadow: 0 0 0 3px var(--uj-accent-soft);
	background: var(--uj-surface);
	outline: none;
}
.uj-field-ico { position: relative; }
.uj-field-ico i {
	position: absolute; left: var(--uj-s3); top: 50%;
	transform: translateY(-50%);
	color: var(--uj-fg-dim);
	font-size: 14px;
	pointer-events: none;
	transition: color var(--uj-t-fast);
}
.uj-field-ico input[type=text] { padding-left: 36px; }
.uj-field-ico input[type=text]:focus + i { color: var(--uj-accent); }

/* Menu a tendina: stesso aspetto dei campi di testo */
.uj select {
	width: 100%;
	height: 44px;
	padding: 0 34px 0 36px;
	background: var(--uj-bg);
	border: 1px solid var(--uj-border);
	border-radius: var(--uj-r-md);
	color: var(--uj-fg);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	text-overflow: ellipsis;
	transition: border-color var(--uj-t-fast), box-shadow var(--uj-t-fast), background var(--uj-t-fast);
}
.uj select:hover { border-color: var(--uj-border-strong); }
.uj select:focus {
	border-color: var(--uj-accent);
	box-shadow: 0 0 0 3px var(--uj-accent-soft);
	background: var(--uj-surface);
	outline: none;
}
.uj select option { background: var(--uj-surface); color: var(--uj-fg); }
.uj select optgroup { background: var(--uj-bg); color: var(--uj-fg-dim); font-style: normal; font-weight: 600; }
.uj-field-sel .uj-sel-chev {
	left: auto; right: var(--uj-s3);
	font-size: 11px;
}
.uj select:focus ~ i { color: var(--uj-accent); }

.uj-search-foot {
	display: flex;
	align-items: center;
	gap: var(--uj-s3);
	flex-wrap: wrap;
	margin-top: var(--uj-s4);
	padding-top: var(--uj-s4);
	border-top: 1px solid var(--uj-border);
}
.uj-hint { font-size: 12.5px; color: var(--uj-fg-dim); margin: 0; }
.uj-search-actions { margin-left: auto; display: flex; gap: var(--uj-s2); }

/* ===========================================================================
   5. Pulsanti
   =========================================================================== */
.uj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--uj-s2);
	min-height: 44px;
	padding: 0 var(--uj-s5);
	border-radius: var(--uj-r-md);
	border: 1px solid transparent;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .2px;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--uj-t-fast), border-color var(--uj-t-fast),
				color var(--uj-t-fast), transform var(--uj-t-fast), box-shadow var(--uj-t-fast);
}
.uj-btn:active { transform: translateY(1px); }
.uj-btn-primary {
	background: var(--uj-accent);
	color: var(--uj-on-accent);
	box-shadow: 0 2px 14px -4px rgba(252,191,43,.55);
}
.uj-btn-primary:hover, .uj-btn-primary:focus { background: var(--uj-accent-hi); color: var(--uj-on-accent); }
.uj-btn-ghost {
	background: transparent;
	border-color: var(--uj-border-strong);
	color: var(--uj-fg-muted);
}
.uj-btn-ghost:hover, .uj-btn-ghost:focus {
	background: var(--uj-surface-3);
	border-color: var(--uj-fg-dim);
	color: var(--uj-fg);
}

/* ===========================================================================
   6. Chip dei filtri attivi
   =========================================================================== */
.uj-chips {
	display: flex;
	flex-wrap: wrap;				/* mai una riga unica ritagliata */
	gap: var(--uj-s2);
	align-items: center;
	min-height: 32px;				/* spazio riservato: niente salti di layout */
}
.uj-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 32px;
	padding: 0 6px 0 12px;
	background: var(--uj-accent-soft);
	border: 1px solid var(--uj-accent-line);
	border-radius: var(--uj-r-pill);
	font-size: 12.5px;
	color: var(--uj-accent-hi);
	max-width: 100%;
}
.uj-chip b { font-weight: 600; color: var(--uj-fg-dim); text-transform: uppercase; font-size: 10.5px; letter-spacing: .6px; }
.uj-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uj-chip button {
	flex: none;
	width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent;
	border: 0; border-radius: 50%;
	color: var(--uj-accent-hi);
	font-size: 11px;
	cursor: pointer;
	transition: background var(--uj-t-fast), color var(--uj-t-fast);
}
.uj-chip button:hover { background: var(--uj-accent); color: var(--uj-on-accent); }

.uj-sugg { display: flex; flex-wrap: wrap; gap: var(--uj-s2); align-items: center; justify-content: center; }
.uj-sugg a {
	display: inline-flex; align-items: center;
	height: 34px; padding: 0 14px;
	background: var(--uj-surface-2);
	border: 1px solid var(--uj-border);
	border-radius: var(--uj-r-pill);
	color: var(--uj-fg-muted);
	font-size: 13px;
	cursor: pointer;
	transition: all var(--uj-t-fast);
}
.uj-sugg a:hover, .uj-sugg a:focus {
	background: var(--uj-accent-soft);
	border-color: var(--uj-accent-line);
	color: var(--uj-accent-hi);
	text-decoration: none;
}

/* ===========================================================================
   7. Barra risultati
   =========================================================================== */
.uj-resbar {
	display: flex;
	align-items: baseline;
	gap: var(--uj-s3);
	flex-wrap: wrap;
	margin-bottom: var(--uj-s3);
	padding: 0 var(--uj-s1);
}
.uj-resbar strong {
	font-family: Righteous, Poppins, sans-serif;
	font-weight: 400;
	font-size: 19px;
	color: var(--uj-fg);
}
.uj-resbar strong b { color: var(--uj-accent); font-weight: 400; }
.uj-resbar small { font-size: 12.5px; color: var(--uj-fg-dim); margin-left: auto; }

/* ===========================================================================
   8. Scheda registrazione
   =========================================================================== */
.uj-list { display: flex; flex-direction: column; gap: 7px; }

.uj-rec {
	display: grid;
	grid-template-columns: 96px minmax(0,1fr) auto;
	align-items: center;
	gap: var(--uj-s4);
	width: 100%;
	text-align: left;
	padding: var(--uj-s3) var(--uj-s4);
	background: var(--uj-surface);
	border: 1px solid var(--uj-border);
	border-left: 3px solid transparent;
	border-radius: var(--uj-r-md);
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: background var(--uj-t-fast), border-color var(--uj-t-fast), transform var(--uj-t-fast);
}
.uj-rec:hover {
	background: var(--uj-surface-2);
	border-color: var(--uj-border-strong);
	border-left-color: var(--uj-accent);
}
.uj-rec[aria-expanded=true] {
	background: var(--uj-surface-2);
	border-left-color: var(--uj-accent);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.uj-rec-ix { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.uj-rec-id {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var(--uj-fg-dim);
	letter-spacing: .5px;
}
.uj-sup {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--uj-r-sm);
	background: var(--uj-surface-3);
	border: 1px solid var(--uj-border-strong);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--uj-fg-muted);
}
.uj-sup-H, .uj-sup-K { background: rgba(252,191,43,.12); border-color: var(--uj-accent-line); color: var(--uj-accent-hi); }

.uj-rec-main { min-width: 0; }
.uj-rec-title {
	margin: 0 0 3px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--uj-fg);
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;			/* tronca invece di spezzare il layout */
	-webkit-box-orient: vertical;
}
.uj-rec:hover .uj-rec-title { color: var(--uj-accent-hi); }
.uj-rec-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--uj-s3);
	font-size: 12.5px;
	color: var(--uj-fg-dim);
}
.uj-rec-meta span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.uj-rec-meta i { font-size: 11px; opacity: .75; }
.uj-rec-meta .uj-ed { color: var(--uj-fg-muted); font-weight: 500; }
.uj-rec-meta em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.uj-rec-act { display: flex; align-items: center; gap: var(--uj-s2); }
.uj-rec-chev {
	width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--uj-fg-dim);
	font-size: 13px;
	transition: transform var(--uj-t-base), color var(--uj-t-fast);
}
.uj-rec[aria-expanded=true] .uj-rec-chev { transform: rotate(180deg); color: var(--uj-accent); }

/* --- Dettaglio espandibile --- */
.uj-rec-detail {
	overflow: hidden;
	background: var(--uj-surface-2);
	border: 1px solid var(--uj-border-strong);
	border-top: 0;
	border-left: 3px solid var(--uj-accent);
	border-radius: 0 0 var(--uj-r-md) var(--uj-r-md);
	margin-top: -7px;				/* chiude il gap con la scheda */
}
.uj-rec-detail[hidden] { display: none; }
.uj-rec-detail-in { padding: var(--uj-s4) var(--uj-s4) var(--uj-s4) 92px; }
.uj-rec-detail h4 {
	margin: 0 0 var(--uj-s3);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--uj-fg-dim);
}
.uj-artists {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
	gap: 2px var(--uj-s4);
}
.uj-artist {
	display: flex;
	align-items: baseline;
	gap: var(--uj-s2);
	padding: 5px 0;
	border-bottom: 1px dashed rgba(255,255,255,.05);
	min-width: 0;
}
.uj-artist a.uj-art-name {
	color: var(--uj-fg);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border-bottom: 1px solid transparent;
	transition: color var(--uj-t-fast), border-color var(--uj-t-fast);
}
.uj-artist a.uj-art-name:hover, .uj-artist a.uj-art-name:focus {
	color: var(--uj-accent); border-bottom-color: var(--uj-accent-line); text-decoration: none;
}
.uj-artist i.uj-ins {
	font-style: normal;
	margin-left: auto;
	font-size: 11.5px;
	color: var(--uj-fg-dim);
	white-space: nowrap;
	padding-left: var(--uj-s2);
}
.uj-artist a.uj-wiki { color: var(--uj-fg-dim); font-size: 11px; transition: color var(--uj-t-fast); }
.uj-artist a.uj-wiki:hover { color: var(--uj-accent); }
.uj-det-skel { display: flex; gap: var(--uj-s3); padding: var(--uj-s4) var(--uj-s4) var(--uj-s4) 92px; }

/* ===========================================================================
   9. Paginazione
   =========================================================================== */
.uj-pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	margin: var(--uj-s5) 0 var(--uj-s2);
}
.uj-pager a, .uj-pager span {
	min-width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 var(--uj-s3);
	border: 1px solid var(--uj-border);
	border-radius: var(--uj-r-md);
	background: var(--uj-surface);
	color: var(--uj-fg-muted);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--uj-t-fast);
}
.uj-pager a:hover, .uj-pager a:focus {
	background: var(--uj-surface-3);
	border-color: var(--uj-accent-line);
	color: var(--uj-accent-hi);
	text-decoration: none;
}
.uj-pager .uj-pg-cur {
	background: var(--uj-accent);
	border-color: var(--uj-accent);
	color: var(--uj-on-accent);
	font-weight: 600;
	cursor: default;
}
.uj-pager .uj-pg-gap { border-color: transparent; background: none; cursor: default; min-width: 24px; padding: 0; }
.uj-pager .uj-pg-off { opacity: .35; cursor: not-allowed; }

/* ===========================================================================
   10. Stati: vuoto, nessun risultato, caricamento
   =========================================================================== */
.uj-state {
	text-align: center;
	padding: var(--uj-s6) var(--uj-s4);
	background: var(--uj-surface);
	border: 1px dashed var(--uj-border-strong);
	border-radius: var(--uj-r-lg);
}
.uj-state i.uj-state-ico { font-size: 34px; color: var(--uj-surface-3); display: block; margin-bottom: var(--uj-s4); }
.uj-state h3 {
	font-family: Righteous, Poppins, sans-serif;
	font-weight: 400;
	font-size: 20px;
	margin: 0 0 var(--uj-s2);
	color: var(--uj-fg);
}
.uj-state p { color: var(--uj-fg-dim); font-size: 14px; margin: 0 auto var(--uj-s4); max-width: 46ch; }
.uj-state-err { border-style: solid; border-color: rgba(248,113,113,.4); background: var(--uj-danger-soft); }
.uj-state-err i.uj-state-ico, .uj-state-err h3 { color: var(--uj-danger); }

/* Scheletro di caricamento: stessa altezza delle schede, niente salti */
.uj-skel-row {
	height: 72px;
	border-radius: var(--uj-r-md);
	border: 1px solid var(--uj-border);
	background: linear-gradient(100deg, var(--uj-surface) 30%, var(--uj-surface-3) 50%, var(--uj-surface) 70%);
	background-size: 250% 100%;
	animation: uj-shimmer 1.3s linear infinite;
}
.uj-skel-line {
	height: 12px; border-radius: var(--uj-r-sm);
	background: linear-gradient(100deg, var(--uj-surface-2) 30%, var(--uj-surface-3) 50%, var(--uj-surface-2) 70%);
	background-size: 250% 100%;
	animation: uj-shimmer 1.3s linear infinite;
}
@keyframes uj-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* Comparsa scaglionata delle schede */
.uj-rec, .uj-state { animation: uj-rise var(--uj-t-slow) both; }
@keyframes uj-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===========================================================================
   11. Footer del sito
   =========================================================================== */
#footer {
	background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
	border-top: 1px solid var(--uj-border);
	color: var(--uj-fg-dim);
	font-size: 12px;
}
#footer a { color: var(--uj-fg-muted); }
#footer a:hover { color: var(--uj-accent); }

/* ===========================================================================
   12. Responsive (mobile-first fallback: niente scroll orizzontale)
   =========================================================================== */
@media (max-width: 991px) {
	.uj-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
	.uj { padding: 0 var(--uj-s3) var(--uj-s6); }
	.uj-head { flex-wrap: wrap; gap: var(--uj-s3); padding-top: var(--uj-s4); }
	.uj-head h1 { font-size: 21px; }
	.uj-head-stats { width: 100%; margin-left: 0; justify-content: space-between; text-align: left; }
	.uj-search { padding: var(--uj-s4); border-radius: var(--uj-r-md); }
	.uj-grid { grid-template-columns: 1fr; gap: var(--uj-s3); }
	.uj-search-actions { margin-left: 0; width: 100%; }
	.uj-search-actions .uj-btn { flex: 1; }

	.uj-rec { grid-template-columns: minmax(0,1fr) auto; gap: var(--uj-s3) var(--uj-s2); padding: var(--uj-s3); }
	.uj-rec-ix { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--uj-s2); }
	.uj-rec-detail-in, .uj-det-skel { padding-left: var(--uj-s4); }
	.uj-artists { grid-template-columns: 1fr; }
	/* Nome e strumenti su righe distinte: niente nomi spezzati a metà */
	.uj-artist { flex-wrap: wrap; }
	.uj-artist i.uj-ins { flex: 1 0 100%; margin-left: 0; padding-left: 0; white-space: normal; }

	#footer .col-xs-6 { width: 100%; text-align: center !important; }
	#footer .col-xs-6 span { float: none !important; display: block; }
}

/* ===========================================================================
   13. Preferenze utente: movimento ridotto, stampa
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.uj * {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.uj-skel-row, .uj-skel-line { animation: none; background: var(--uj-surface-2); }
}
@media print {
	.uj-search, .uj-pager, .uj-rec-act, #footer, .noprint { display: none !important; }
	html, body.black, .uj-rec, .uj-rec-detail { background: #fff !important; color: #000 !important; }
	.uj-rec { border: 0; border-bottom: 1px solid #ccc; border-radius: 0; break-inside: avoid; }
	.uj-rec-title, .uj-artist a.uj-art-name { color: #000 !important; }
	.uj-rec-meta, .uj-rec-id, .uj-artist i.uj-ins { color: #444 !important; }
}