/* =====================================================================
   Synology Italia — Restyling moderno (override non invasivo di prosilver)
   Tema chiaro flat, palette blu Synology.
   ===================================================================== */

/* Font Inter autoospitato (nessuna richiesta esterna a Google, niente cookie/IP di terze parti) */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/inter.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/inter.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/inter.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/inter.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--syn-blue: #0a6ed1;
	--syn-blue-dark: #085aad;
	--syn-blue-light: #eaf3fc;
	--syn-blue-900: #06356b;
	--syn-cyan: #22c1f0;
	--syn-ink: #1c2733;
	--syn-border: #e3e8ee;
}

/* Tipografia più moderna */
html, body, input, textarea, select, button {
	font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body {
	background-color: #f2f4f7;
	background-image:
		radial-gradient(1200px 500px at 15% -10%, #e3efff 0%, transparent 60%),
		radial-gradient(900px 420px at 90% 0%, #e6f7ff 0%, transparent 55%),
		linear-gradient(180deg, #f7f9fd 0%, #eef2f8 100%);
	background-attachment: fixed;
	background-repeat: no-repeat;
}

/* =====================================================================
   STEP 1 — Header hero
   Gradiente blu/ciano, pattern a nodi (SVG inline), logo su misura.
   ===================================================================== */
.headerbar {
	position: relative;
	overflow: hidden;
	background: linear-gradient(115deg, var(--syn-blue-900) 0%, var(--syn-blue) 45%, var(--syn-cyan) 120%) !important;
	background-image: linear-gradient(115deg, var(--syn-blue-900) 0%, var(--syn-blue) 45%, var(--syn-cyan) 120%) !important;
	border-radius: 22px;
	padding: 30px 30px 26px !important;
	margin-bottom: 16px !important;
	box-shadow: 0 12px 40px rgba(10, 110, 209, 0.16);
	color: #ffffff;
}

/* pattern decorativo: nodi e linee (richiamo NAS/rete) */
.headerbar::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='.5'%3E%3Cpath d='M12 140 L60 96 L120 122 L182 70 L236 96'/%3E%3Cpath d='M12 40 L64 20 L120 58 L188 24'/%3E%3Cpath d='M60 96 L64 20'/%3E%3Cpath d='M120 122 L120 58'/%3E%3Cpath d='M182 70 L188 24'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='.75'%3E%3Ccircle cx='12' cy='140' r='2.4'/%3E%3Ccircle cx='60' cy='96' r='2.4'/%3E%3Ccircle cx='120' cy='122' r='2.4'/%3E%3Ccircle cx='182' cy='70' r='2.4'/%3E%3Ccircle cx='236' cy='96' r='2.4'/%3E%3Ccircle cx='64' cy='20' r='2.4'/%3E%3Ccircle cx='120' cy='58' r='2.4'/%3E%3Ccircle cx='188' cy='24' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 420px auto;
	opacity: 0.16;
	pointer-events: none;
}

/* alone luminoso in alto a destra */
.headerbar::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 65%);
	pointer-events: none;
}

.headerbar .inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

/* logo su misura al posto di quello phpBB di default */
.headerbar .logo {
	padding: 0 18px 0 0 !important;
	display: inline-block !important;
}

.headerbar .site_logo {
	width: 56px !important;
	height: 56px !important;
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Crect x='5' y='5' width='22' height='22' rx='6' stroke='%23ffffff' stroke-width='2.2'/%3E%3Cline x1='9.5' y1='12.5' x2='22.5' y2='12.5' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='9.5' y1='19.5' x2='22.5' y2='19.5' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='19.5' cy='12.5' r='1.4' fill='%2322c55e'/%3E%3Ccircle cx='19.5' cy='19.5' r='1.4' fill='%2322c55e'/%3E%3C/svg%3E") !important;
	background-size: 32px 32px;
	background-position: center;
	background-repeat: no-repeat;
}

.headerbar .site-description {
	width: auto !important;
	float: none !important;
	flex: 1 1 320px;
	min-width: 0;
	overflow: hidden;
}

.headerbar .site-description h1 {
	margin: 0 !important;
	padding-top: 4px;
	font-size: 27px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: #ffffff !important;
}

.headerbar .site-description p {
	margin: 4px 0 0 !important;
	font-size: 13px;
	letter-spacing: 0.2px;
	color: rgba(255, 255, 255, 0.72) !important;
}

.headerbar .site-description p.skiplink {
	margin: 0 !important;
}

/* ricerca in vetro smerigliato */
.headerbar #search-box {
	float: none !important;
	flex: 0 0 auto;
	width: auto !important;
	margin: 0 !important;
}

.headerbar #search-box fieldset {
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	padding: 6px 8px 6px 16px;
	transition: background 0.2s, border-color 0.2s;
}

.headerbar #search-box fieldset:focus-within {
	background: rgba(255, 255, 255, 0.24);
	border-color: rgba(255, 255, 255, 0.5);
}

.headerbar #search-box input.inputbox {
	float: none !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	color: #ffffff !important;
	font-size: 13.5px;
	width: 160px !important;
	padding: 2px 0 !important;
}

.headerbar #search-box input.inputbox::placeholder {
	color: rgba(255, 255, 255, 0.65);
}

.headerbar #search-box .button {
	float: none !important;
	background: rgba(255, 255, 255, 0.9) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 50% !important;
	color: var(--syn-blue-dark) !important;
	width: 30px;
	height: 30px;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.18s;
}

.headerbar #search-box .button:hover {
	transform: scale(1.08);
	color: var(--syn-blue) !important;
}

.headerbar #search-box .button-search-end {
	background: rgba(255, 255, 255, 0.18) !important;
	color: #ffffff !important;
}

@media (max-width: 700px) {
	.headerbar {
		padding: 22px 18px !important;
		border-radius: 18px;
	}
	.headerbar .site-description h1 {
		font-size: 21px;
	}
	.headerbar .logo {
		padding-right: 14px !important;
	}
	.headerbar .site_logo {
		width: 46px !important;
		height: 46px !important;
		background-size: 26px 26px;
	}
}

/* =====================================================================
   STEP 2 — Navbar chiara in vetro, coerente col resto del sito
   ===================================================================== */
.navbar {
	background: rgba(255, 255, 255, 0.86) !important;
	background-image: none !important;
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 14px;
	box-shadow: 0 4px 22px rgba(15, 35, 70, 0.09);
	padding: 4px 8px !important;
	margin-bottom: 16px;
}

/* la sola barra superiore resta agganciata in alto allo scroll */
.navbar:has(#nav-main) {
	position: sticky;
	top: 10px;
	z-index: 30;
}

/* voci di menu a pillola */
.navbar ul.linklist > li > a,
.navbar ul.linklist > li > span,
.navbar ul.linklist > li > a .icon {
	color: var(--syn-ink) !important;
	font-weight: 500;
}

.navbar ul.linklist > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 9px;
	transition: background 0.16s, color 0.16s;
}

.navbar ul.linklist > li > a:hover {
	background: var(--syn-blue-light);
	color: var(--syn-blue) !important;
	text-decoration: none;
}

.navbar ul.linklist > li > a:hover .icon {
	color: var(--syn-blue) !important;
}

.navbar .dropdown-toggle .caret {
	border-top-color: var(--syn-ink) !important;
}

/* avatar utente nella navbar */
.navbar .avatar {
	border-radius: 7px;
	vertical-align: middle;
}

/* riga "Indice" (breadcrumbs): separata da una linea sottile, testo tenue */
.navbar ul.nav-breadcrumbs {
	border-top: 1px solid var(--syn-border);
	margin-top: 2px;
	padding-top: 2px !important;
}

.navbar ul.nav-breadcrumbs li a,
.navbar ul.nav-breadcrumbs li a .icon,
.navbar ul.nav-breadcrumbs li span,
.navbar ul.nav-breadcrumbs li .crumb {
	color: #7e8ca0 !important;
}

.navbar ul.nav-breadcrumbs li a:hover,
.navbar ul.nav-breadcrumbs li a:hover .icon {
	color: var(--syn-blue) !important;
}

/* phpBB sposta FAQ/PCA/PCM dentro "Collegamenti Rapidi" quando la barra è
   stretta: le teniamo sempre visibili, a ogni larghezza. */
#nav-main > li.hidden {
	display: list-item !important;
}

/* sotto i 600px le voci si stringono per restare in riga */
@media (max-width: 599px) {
	.navbar .inner {
		padding: 4px 4px !important;
	}

	.navbar ul.linklist > li > a {
		padding: 7px 8px;
		gap: 4px;
		font-size: 13px;
	}
}

/* =====================================================================
   STEP 3 — Card delle categorie
   ===================================================================== */
.forabg, .forumbg {
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid var(--syn-border);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 35, 70, 0.05), 0 2px 10px rgba(15, 35, 70, 0.04);
	margin-bottom: 20px !important;
	padding: 0 !important;
	overflow: hidden;
	animation: syn-rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.forabg:nth-of-type(2), .forumbg:nth-of-type(2) { animation-delay: 0.06s; }
.forabg:nth-of-type(3), .forumbg:nth-of-type(3) { animation-delay: 0.12s; }
.forabg:nth-of-type(n+4), .forumbg:nth-of-type(n+4) { animation-delay: 0.18s; }

@keyframes syn-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.forabg, .forumbg { animation: none; }
}

/* header categoria: chiaro, con barretta d'accento al posto del blocco blu */
.forabg .header, .forumbg .header {
	background: linear-gradient(180deg, #fbfcff, #f5f9ff) !important;
	background-image: linear-gradient(180deg, #fbfcff, #f5f9ff) !important;
	border-bottom: 1px solid var(--syn-border);
	padding: 6px 8px !important;
}

.forabg .header dt .list-inner,
.forumbg .header dt .list-inner {
	display: flex;
	align-items: center;
	gap: 11px;
	padding-left: 12px !important;
}

.forabg .header dt .list-inner::before,
.forumbg .header dt .list-inner::before {
	content: "";
	flex: 0 0 4px;
	width: 4px;
	height: 17px;
	border-radius: 99px;
	background: linear-gradient(180deg, var(--syn-blue), var(--syn-blue-dark));
}

.forabg .header a, .forumbg .header a,
.forabg .header dt, .forumbg .header dt {
	color: var(--syn-ink) !important;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.9px;
	text-transform: uppercase;
}

.forabg .header dd, .forumbg .header dd {
	color: #8a99ad !important;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.7px;
	text-transform: uppercase;
}

/* intestazioni tabella (elenchi argomenti) coerenti */
table.table1 thead th {
	background: linear-gradient(180deg, #fbfcff, #f5f9ff) !important;
	background-image: linear-gradient(180deg, #fbfcff, #f5f9ff) !important;
	color: var(--syn-ink) !important;
	border-bottom: 1px solid var(--syn-border);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
}

table.table1 thead th a {
	color: var(--syn-ink) !important;
}

/* Righe argomenti/forum: più respiro, hover morbido */
.forumbg-table > .inner, .forabg .inner {
	padding: 4px 8px;
}

table.table1 tbody tr:hover, table.table1 tbody tr.hover {
	background-color: var(--syn-blue-light) !important;
}

/* Righe elenco forum/sottoforum (li.row, non table) */
.bg1, .bg2, .row {
	background: #ffffff !important;
}

.row:nth-child(even), li.bg2 {
	background: #f7f9fb !important;
}

.row:hover, .row.hover {
	background: var(--syn-blue-light) !important;
}

.forumtitle, .forumtitle:visited {
	color: var(--syn-ink) !important;
}

/* ---------- Pannelli generici (post, cp, panel) ---------- */
.panel, .post {
	border-radius: 12px !important;
	border: 1px solid var(--syn-border);
	box-shadow: 0 1px 4px rgba(28, 39, 51, 0.05);
}

/* ---------- Mobile: più spazio ai tocchi, meno affollamento ---------- */
@media (max-width: 700px) {
	.headerbar { border-radius: 8px; }
	.forabg, .forumbg { border-radius: 10px; }

	.navbar ul.linklist > li a {
		padding: 10px 12px;
		display: inline-block;
	}

	.site-description h1 {
		font-size: 1.3em;
	}

	table.table1 thead th {
		padding: 8px 10px;
		font-size: 0.95em;
	}

	.forumbg-table > .inner, .forabg .inner {
		padding: 8px 10px;
	}
}

/* =====================================================================
   STEP 4 — Righe dei forum
   Icona a riquadro 44px, hover che solleva la riga con bordo d'accento,
   contatori a pillola.
   ===================================================================== */
li.row {
	position: relative;
}

li.row dl.row-item {
	padding: 14px 18px !important;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

/* icona forum a riquadro 44px */
dl.row-item {
	background-size: 44px 44px !important;
	background-position: 8px 50% !important;
}

dl.row-item dt .list-inner {
	padding-left: 62px !important;
	color: #8a99ad;
	font-size: 13px;
	line-height: 1.45;
}

/* la riga di intestazione categoria non ha icona */
.forabg .header dt .list-inner,
.forumbg .header dt .list-inner {
	padding-left: 12px !important;
	color: inherit;
	font-size: inherit;
}

/* bordo d'accento che compare al passaggio del mouse */
li.row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 0 4px 4px 0;
	background: linear-gradient(180deg, #2f8ff0, var(--syn-blue-dark));
	opacity: 0;
	transform: scaleY(0.4);
	transition: opacity 0.18s, transform 0.18s;
	pointer-events: none;
	z-index: 1;
}

li.row:hover::before {
	opacity: 1;
	transform: scaleY(1);
}

li.row:hover dl.row-item {
	background-color: #f7fbff !important;
	transform: translateX(3px);
}

/* titoli */
.forumtitle {
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.15px;
	transition: color 0.16s;
}

.forum_unread .forumtitle {
	color: var(--syn-blue-dark) !important;
}

li.row:hover .forumtitle {
	color: var(--syn-blue) !important;
}

/* contatori a pillola (solo desktop: su mobile phpBB li sposta nella descrizione) */
@media (min-width: 701px) {
	dl.row-item dd.topics,
	dl.row-item dd.posts {
		position: relative;
		isolation: isolate;
		font-size: 13px;
		font-weight: 600;
		color: var(--syn-ink);
		font-variant-numeric: tabular-nums;
	}

	dl.row-item dd.topics::before,
	dl.row-item dd.posts::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 4px;
		transform: translateX(-50%);
		width: 68px;
		height: 28px;
		border-radius: 999px;
		background: #f3f6fb;
		border: 1px solid #e8eef6;
		z-index: -1;
	}

	.forum_unread dd.topics,
	.forum_unread dd.posts {
		color: var(--syn-blue-dark);
	}

	.forum_unread dd.topics::before,
	.forum_unread dd.posts::before {
		background: #eaf3ff;
		border-color: #d6e7fd;
	}

	/* nessuna pillola sulle etichette di intestazione */
	.forabg .header dd.topics::before,
	.forabg .header dd.posts::before,
	.forumbg .header dd.topics::before,
	.forumbg .header dd.posts::before {
		display: none;
	}
}

@media (max-width: 700px) {
	li.row dl.row-item {
		padding: 12px 12px !important;
	}

	dl.row-item {
		background-size: 36px 36px !important;
		background-position: 4px 14px !important;
	}

	dl.row-item dt .list-inner {
		padding-left: 48px !important;
	}
}

/* =====================================================================
   STEP 5 — Sottoforum come tag e blocco "ultimo messaggio"
   ===================================================================== */

/* sottoforum come tag cliccabili */
dl.row-item a.subforum {
	display: inline-flex;
	align-items: flex-start;
	gap: 5px;
	max-width: 100%;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.35;
	color: #5a6b82 !important;
	background: #f1f5fa;
	border: 1px solid #e6ecf4;
	padding: 4px 10px;
	border-radius: 10px;
	margin: 0 4px 4px 0;
	vertical-align: top;
	text-decoration: none;
	transition: background 0.16s, color 0.16s, border-color 0.16s;
}

dl.row-item a.subforum:hover {
	background: var(--syn-blue-light);
	border-color: #cfe2fb;
	color: var(--syn-blue) !important;
	text-decoration: none;
}

dl.row-item a.subforum .icon {
	font-size: 10px;
	opacity: 0.6;
}

dl.row-item a.subforum.unread {
	background: #eaf3ff;
	border-color: #d6e7fd;
	color: var(--syn-blue-dark) !important;
	font-weight: 600;
}

dl.row-item a.subforum.unread .icon {
	color: var(--syn-blue) !important;
	opacity: 1;
}

/* etichetta "Subforum:" più discreta */
dl.row-item dt .list-inner > strong {
	display: block;
	margin: 8px 0 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #a3b0c2;
}

/* ---------- blocco "ultimo messaggio" ---------- */
dd.lastpost {
	font-size: 12.5px;
	line-height: 1.5;
}

@media (min-width: 701px) {
	dd.lastpost {
		border-left: 1px solid var(--syn-border);
		padding-left: 14px !important;
	}
}

dd.lastpost a.lastsubject {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--syn-ink) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 3px;
}

dd.lastpost a.lastsubject:hover {
	color: var(--syn-blue) !important;
}

dd.lastpost time {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	color: #a3b0c2;
}

/* mini-avatar colorato prima del nome utente */
dd.lastpost .username::before,
dd.lastpost .username-coloured::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 6px;
	vertical-align: -4px;
	border-radius: 50%;
	background-color: #2f8ff0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3C/svg%3E"), linear-gradient(135deg, #2f8ff0, #22c1f0);
	background-size: 11px 11px, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}

/* iconcina "vai all'ultimo messaggio" più discreta */
dd.lastpost .fa-external-link-square {
	opacity: 0.45;
	font-size: 10px;
}

/* =====================================================================
   STEP 6 — Pagina discussione (viewtopic)
   Card messaggio, colonna autore a destra, citazioni, codice, pulsanti.
   ===================================================================== */

/* titolo della discussione */
h2.topic-title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.3px;
	color: var(--syn-ink);
}

h2.topic-title a {
	color: var(--syn-ink) !important;
}

h2.topic-title a:hover {
	color: var(--syn-blue) !important;
}

/* ---------- card del messaggio ---------- */
.post {
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid var(--syn-border);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 35, 70, 0.05), 0 2px 10px rgba(15, 35, 70, 0.04);
	margin-bottom: 16px;
	padding: 0 !important;
	overflow: hidden;
}

.post.bg1, .post.bg2 {
	background: #ffffff !important;
	background-image: none !important;
}

.postbody {
	float: none !important;
	width: auto !important;
	overflow: hidden;
	padding: 18px 6px 18px 20px;
}

/* ---------- colonna autore (resta a destra) ---------- */
.postprofile {
	margin: 14px 14px 14px 10px !important;
	padding: 16px 12px !important;
	background: linear-gradient(180deg, #fbfcff, #f5f8fd);
	border: 1px solid var(--syn-border) !important;
	border-radius: 12px;
	text-align: center;
}

.postprofile .avatar-container {
	margin: 0 0 10px !important;
	float: none !important;
}

.postprofile img.avatar {
	max-width: 76px;
	height: auto;
	border-radius: 12px;
	background: #ffffff;
	padding: 4px;
	border: 1px solid var(--syn-border);
	box-shadow: 0 3px 12px rgba(15, 35, 70, 0.10);
}

.postprofile .username,
.postprofile .username-coloured {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	margin-bottom: 5px;
	text-decoration: none;
}

.postprofile .profile-rank {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--syn-blue-dark);
	margin-bottom: 8px;
}

.postprofile .profile-rank img {
	max-width: 100%;
	height: auto;
	margin-top: 5px;
	opacity: 0.9;
}

.postprofile dd {
	margin: 0 0 4px !important;
	font-size: 11.5px;
	color: #8a99ad;
}

.postprofile dd strong {
	color: var(--syn-ink);
	font-weight: 600;
}

.postprofile .profile-posts {
	border-top: 1px solid var(--syn-border);
	padding-top: 9px;
	margin-top: 9px !important;
}

/* ---------- testata del messaggio ---------- */
.postbody h3 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 4px;
}

.postbody h3 a {
	color: var(--syn-ink) !important;
}

.postbody h3 a:hover {
	color: var(--syn-blue) !important;
}

p.author {
	font-size: 12px;
	color: #8a99ad;
	margin-bottom: 14px !important;
}

p.author a {
	color: var(--syn-blue) !important;
	font-weight: 600;
}

/* pulsanti azione del messaggio, tondi e discreti */
.post-buttons .button {
	width: 32px;
	height: 32px;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	background-image: none !important;
	color: #8a99ad !important;
	border: 1px solid var(--syn-border) !important;
	box-shadow: none !important;
}

.post-buttons .button:hover {
	color: var(--syn-blue) !important;
	background: #f6f9ff !important;
	border-color: #cfe2fb !important;
}

/* ---------- corpo del messaggio ---------- */
.postbody .content {
	font-size: 14.5px;
	line-height: 1.7;
	color: #3d4a5c;
}

/* citazioni */
blockquote {
	margin: 14px 0;
	padding: 12px 16px !important;
	border-radius: 10px;
	background: #f6f9ff !important;
	background-image: none !important;
	border: 1px solid #e2ecfa !important;
	border-left: 3px solid #2f8ff0 !important;
	font-size: 13.5px;
	color: var(--syn-soft, #5a6b82);
}

blockquote cite {
	display: block;
	font-style: normal;
	font-weight: 700;
	font-size: 12px;
	color: var(--syn-blue-dark);
	margin-bottom: 5px;
}

/* blocchi di codice */
.codebox {
	margin: 14px 0;
	border-radius: 11px;
	overflow: hidden;
	border: 1px solid #223049 !important;
	background: #0f1b2d !important;
}

.codebox p {
	margin: 0 !important;
	padding: 8px 14px !important;
	background: #182740 !important;
	color: #8fa3c4 !important;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	border: 0 !important;
}

.codebox code {
	display: block;
	padding: 14px !important;
	background: transparent !important;
	color: #d6e2f5 !important;
	font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
	font-size: 12.5px;
	line-height: 1.6;
}

/* firma */
.signature {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px dashed var(--syn-border) !important;
	font-size: 12px;
	color: #8a99ad;
	line-height: 1.6;
}

/* =====================================================================
   Pulsanti, barra azioni e paginazione (validi su tutto il sito)
   ===================================================================== */
.action-bar {
	background: transparent !important;
	border: 0 !important;
}

.button {
	border-radius: 999px !important;
	border: 1px solid var(--syn-border) !important;
	background: #ffffff !important;
	background-image: none !important;
	color: var(--syn-blue) !important;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(15, 35, 70, 0.06);
	transition: transform 0.16s, box-shadow 0.16s, background 0.16s, border-color 0.16s;
}

.button:hover {
	background: var(--syn-blue-light) !important;
	border-color: #cfe2fb !important;
	color: var(--syn-blue) !important;
	transform: translateY(-1px);
}

.button .icon {
	color: inherit !important;
}

/* pulsante principale della barra (Rispondi / Nuovo argomento) */
.action-bar > .button:first-of-type {
	background: linear-gradient(135deg, var(--syn-blue), #2f8ff0) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	box-shadow: 0 2px 10px rgba(10, 110, 209, 0.25);
}

.action-bar > .button:first-of-type:hover {
	box-shadow: 0 5px 16px rgba(10, 110, 209, 0.32);
	color: #ffffff !important;
}

/* paginazione */
.pagination li a,
.pagination li span {
	min-width: 32px;
	height: 32px;
	line-height: 30px;
	padding: 0 9px;
	border-radius: 9px !important;
	background: #ffffff !important;
	border: 1px solid var(--syn-border) !important;
	color: var(--syn-ink) !important;
	transition: background 0.16s, color 0.16s, border-color 0.16s;
}

.pagination li a:hover {
	background: var(--syn-blue-light) !important;
	color: var(--syn-blue) !important;
	border-color: #cfe2fb !important;
}

.pagination li.active span {
	background: linear-gradient(135deg, var(--syn-blue), #2f8ff0) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	box-shadow: 0 2px 8px rgba(10, 110, 209, 0.28);
}

.pagination li.ellipsis span {
	background: transparent !important;
	border: 0 !important;
	color: #a3b0c2 !important;
}

/* su mobile la colonna autore diventa una striscia sopra il messaggio */
@media (max-width: 700px) {
	.postprofile {
		float: none !important;
		width: auto !important;
		display: flex;
		align-items: center;
		gap: 12px;
		text-align: left;
		margin: 12px 12px 0 !important;
		padding: 10px 12px !important;
	}

	.postprofile .avatar-container {
		margin: 0 !important;
	}

	.postprofile img.avatar {
		max-width: 46px;
	}

	.postprofile .profile-posts,
	.postprofile .profile-joined,
	.postprofile .profile-contact {
		display: none !important;
	}

	.postbody {
		width: auto !important;
		float: none !important;
		padding: 14px 14px 16px;
	}
}

/* =====================================================================
   Icone forum personalizzate, tutte SVG inline:
   nessun file esterno, nessuna richiesta di terze parti.
   ===================================================================== */
.forum_read { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='gr' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f1f4f9'/%3E%3Cstop offset='1' stop-color='%23e5eaf2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='42' height='42' rx='13' fill='url(%23gr)' stroke='%23e2e8f1' stroke-width='1'/%3E%3Crect x='13' y='13' width='18' height='18' rx='5' fill='none' stroke='%2394a3b8' stroke-width='2'/%3E%3Cline x1='16.5' y1='19.5' x2='27.5' y2='19.5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='16.5' y1='25.5' x2='27.5' y2='25.5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='25.5' cy='19.5' r='1.1' fill='%2394a3b8'/%3E%3Ccircle cx='25.5' cy='25.5' r='1.1' fill='%2394a3b8'/%3E%3C/svg%3E") !important; }
.forum_read_locked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='grl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f1f4f9'/%3E%3Cstop offset='1' stop-color='%23e5eaf2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='42' height='42' rx='13' fill='url(%23grl)' stroke='%23e2e8f1' stroke-width='1'/%3E%3Crect x='13' y='13' width='18' height='18' rx='5' fill='none' stroke='%2394a3b8' stroke-width='2'/%3E%3Cline x1='16.5' y1='19.5' x2='27.5' y2='19.5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='16.5' y1='25.5' x2='27.5' y2='25.5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='25.5' cy='19.5' r='1.1' fill='%2394a3b8'/%3E%3Ccircle cx='25.5' cy='25.5' r='1.1' fill='%2394a3b8'/%3E%3Ccircle cx='34' cy='34' r='8.5' fill='%23ffffff' stroke='%23e2e8f1' stroke-width='1'/%3E%3Crect x='30.7' y='33.6' width='6.6' height='5.2' rx='1.4' fill='%2394a3b8'/%3E%3Cpath d='M32 33.6 v-1.9 a2 2 0 0 1 4 0 v1.9' fill='none' stroke='%2394a3b8' stroke-width='1.5'/%3E%3C/svg%3E") !important; }
.forum_read_subforum { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='grs' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f1f4f9'/%3E%3Cstop offset='1' stop-color='%23e5eaf2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='42' height='42' rx='13' fill='url(%23grs)' stroke='%23e2e8f1' stroke-width='1'/%3E%3Crect x='13' y='13' width='18' height='18' rx='5' fill='none' stroke='%2394a3b8' stroke-width='2'/%3E%3Cline x1='16.5' y1='19.5' x2='27.5' y2='19.5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='16.5' y1='25.5' x2='27.5' y2='25.5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='25.5' cy='19.5' r='1.1' fill='%2394a3b8'/%3E%3Ccircle cx='25.5' cy='25.5' r='1.1' fill='%2394a3b8'/%3E%3Ccircle cx='34' cy='34' r='8.5' fill='%23ffffff' stroke='%23e2e8f1' stroke-width='1'/%3E%3Cpath d='M31 30.6 v3.6 a1.8 1.8 0 0 0 1.8 1.8 h3.4' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='31' cy='30' r='1.3' fill='%2394a3b8'/%3E%3Ccircle cx='36.6' cy='36.5' r='1.3' fill='%2394a3b8'/%3E%3C/svg%3E") !important; }
.forum_unread { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='gu' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e7f2ff'/%3E%3Cstop offset='1' stop-color='%23d8e9ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='42' height='42' rx='13' fill='url(%23gu)' stroke='%23c7defa' stroke-width='1'/%3E%3Crect x='13' y='13' width='18' height='18' rx='5' fill='none' stroke='%230a6ed1' stroke-width='2'/%3E%3Cline x1='16.5' y1='19.5' x2='27.5' y2='19.5' stroke='%230a6ed1' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='16.5' y1='25.5' x2='27.5' y2='25.5' stroke='%230a6ed1' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='25.5' cy='19.5' r='1.1' fill='%230a6ed1'/%3E%3Ccircle cx='25.5' cy='25.5' r='1.1' fill='%230a6ed1'/%3E%3Ccircle cx='36' cy='8' r='5.2' fill='%2322c55e' stroke='%23ffffff' stroke-width='2.6'/%3E%3C/svg%3E") !important; }
.forum_unread_locked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='gul' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e7f2ff'/%3E%3Cstop offset='1' stop-color='%23d8e9ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='42' height='42' rx='13' fill='url(%23gul)' stroke='%23c7defa' stroke-width='1'/%3E%3Crect x='13' y='13' width='18' height='18' rx='5' fill='none' stroke='%230a6ed1' stroke-width='2'/%3E%3Cline x1='16.5' y1='19.5' x2='27.5' y2='19.5' stroke='%230a6ed1' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='16.5' y1='25.5' x2='27.5' y2='25.5' stroke='%230a6ed1' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='25.5' cy='19.5' r='1.1' fill='%230a6ed1'/%3E%3Ccircle cx='25.5' cy='25.5' r='1.1' fill='%230a6ed1'/%3E%3Ccircle cx='34' cy='34' r='8.5' fill='%23ffffff' stroke='%23c7defa' stroke-width='1'/%3E%3Crect x='30.7' y='33.6' width='6.6' height='5.2' rx='1.4' fill='%230a6ed1'/%3E%3Cpath d='M32 33.6 v-1.9 a2 2 0 0 1 4 0 v1.9' fill='none' stroke='%230a6ed1' stroke-width='1.5'/%3E%3Ccircle cx='36' cy='8' r='5.2' fill='%2322c55e' stroke='%23ffffff' stroke-width='2.6'/%3E%3C/svg%3E") !important; }
.forum_unread_subforum { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='gus' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e7f2ff'/%3E%3Cstop offset='1' stop-color='%23d8e9ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='42' height='42' rx='13' fill='url(%23gus)' stroke='%23c7defa' stroke-width='1'/%3E%3Crect x='13' y='13' width='18' height='18' rx='5' fill='none' stroke='%230a6ed1' stroke-width='2'/%3E%3Cline x1='16.5' y1='19.5' x2='27.5' y2='19.5' stroke='%230a6ed1' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='16.5' y1='25.5' x2='27.5' y2='25.5' stroke='%230a6ed1' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='25.5' cy='19.5' r='1.1' fill='%230a6ed1'/%3E%3Ccircle cx='25.5' cy='25.5' r='1.1' fill='%230a6ed1'/%3E%3Ccircle cx='34' cy='34' r='8.5' fill='%23ffffff' stroke='%23c7defa' stroke-width='1'/%3E%3Cpath d='M31 30.6 v3.6 a1.8 1.8 0 0 0 1.8 1.8 h3.4' fill='none' stroke='%230a6ed1' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='31' cy='30' r='1.3' fill='%230a6ed1'/%3E%3Ccircle cx='36.6' cy='36.5' r='1.3' fill='%230a6ed1'/%3E%3Ccircle cx='36' cy='8' r='5.2' fill='%2322c55e' stroke='%23ffffff' stroke-width='2.6'/%3E%3C/svg%3E") !important; }
.forum_link { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='gl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f1f4f9'/%3E%3Cstop offset='1' stop-color='%23e5eaf2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='42' height='42' rx='13' fill='url(%23gl)' stroke='%23e2e8f1' stroke-width='1'/%3E%3Crect x='11' y='15' width='17' height='17' rx='4.5' fill='none' stroke='%2394a3b8' stroke-width='2'/%3E%3Cline x1='14.5' y1='21' x2='24.5' y2='21' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='14.5' y1='26.5' x2='24.5' y2='26.5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M25 13 L33 13 L33 21' fill='none' stroke='%230a6ed1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='33' y1='13' x2='24' y2='22' stroke='%230a6ed1' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") !important; }

/* =====================================================================
   STEP 7 — Lista argomenti (viewforum) e allineamento della pagina
   discussione all'anteprima approvata.
   ===================================================================== */

/* ---------- titolo e riga autore dell'argomento ---------- */
a.topictitle {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.1px;
	color: var(--syn-ink) !important;
	transition: color 0.16s;
}

li.row:hover a.topictitle {
	color: var(--syn-blue) !important;
}

dl[class*="_unread"] a.topictitle {
	color: var(--syn-blue-900) !important;
	font-weight: 700;
}

.topic-poster {
	margin-top: 3px;
	font-size: 12.5px;
	color: #8a99ad;
}

.topic-poster a {
	font-weight: 600;
}

/* ---------- etichette "In evidenza" / "Annuncio" / "Chiuso" ----------
   .topic-poster è la versione desktop, .responsive-show quella che
   phpBB mostra al suo posto sotto i 700px: stesso badge su entrambe. */
dl.row-item[class*="sticky_"] dt .topic-poster::before,
dl.row-item[class*="sticky_"] dt .responsive-show::before,
dl.row-item[class*="announce_"] dt .topic-poster::before,
dl.row-item[class*="announce_"] dt .responsive-show::before,
dl.row-item[class*="global_"] dt .topic-poster::before,
dl.row-item[class*="global_"] dt .responsive-show::before,
dl.row-item[class*="_locked"] dt .topic-poster::before,
dl.row-item[class*="_locked"] dt .responsive-show::before {
	display: inline-block;
	margin-right: 7px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	vertical-align: 1px;
}

dl.row-item[class*="sticky_"] dt .topic-poster::before,
dl.row-item[class*="sticky_"] dt .responsive-show::before {
	content: "In evidenza";
	color: #b4770b;
	background: #fff7e8;
	border: 1px solid #fae3b8;
}

dl.row-item[class*="announce_"] dt .topic-poster::before,
dl.row-item[class*="announce_"] dt .responsive-show::before,
dl.row-item[class*="global_"] dt .topic-poster::before,
dl.row-item[class*="global_"] dt .responsive-show::before {
	content: "Annuncio";
	color: var(--syn-blue-dark);
	background: #eef4ff;
	border: 1px solid #d3e2fb;
}

/* il lucchetto vince su tutto: va per ultimo */
dl.row-item[class*="_locked"] dt .topic-poster::before,
dl.row-item[class*="_locked"] dt .responsive-show::before {
	content: "Chiuso";
	color: #7c8797;
	background: #f2f4f7;
	border: 1px solid #e3e8ee;
}

/* ---------- contatori Risposte / Visite a pillola ---------- */
@media (min-width: 701px) {
	dl.row-item dd.views {
		position: relative;
		isolation: isolate;
		font-size: 13px;
		font-weight: 600;
		color: var(--syn-ink);
		font-variant-numeric: tabular-nums;
	}

	dl.row-item dd.views::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 4px;
		transform: translateX(-50%);
		width: 68px;
		height: 28px;
		border-radius: 999px;
		background: #f3f6fb;
		border: 1px solid #e8eef6;
		z-index: -1;
	}

	dl[class*="_unread"] dd.posts,
	dl[class*="_unread"] dd.views {
		color: var(--syn-blue-dark);
	}

	dl[class*="_unread"] dd.posts::before,
	dl[class*="_unread"] dd.views::before {
		background: #eaf3ff;
		border-color: #d6e7fd;
	}

	/* nessuna pillola sulle intestazioni di colonna */
	.forabg .header dd.views::before,
	.forumbg .header dd.views::before,
	.forabg .header dd.posts::before,
	.forumbg .header dd.posts::before {
		display: none !important;
	}
}

/* =====================================================================
   Pagina discussione — colonna autore a sinistra, come nell'anteprima
   ===================================================================== */
.post > .inner {
	display: flex;
	align-items: stretch;
}

.postprofile {
	float: none !important;
	flex: 0 0 190px;
	width: 190px !important;
	margin: 0 !important;
	padding: 20px 14px !important;
	border: 0 !important;
	border-right: 1px solid var(--syn-border) !important;
	border-radius: 0 !important;
	background: linear-gradient(180deg, #fbfcff, #f5f8fd);
	text-align: center;
}

.postbody {
	flex: 1;
	min-width: 0;
	padding: 18px 22px 20px !important;
}

/* avatar tondo, senza tagliare le immagini larghe */
.postprofile img.avatar {
	width: 68px;
	height: 68px;
	max-width: 68px;
	border-radius: 50% !important;
	object-fit: contain;
	background: #ffffff;
	padding: 5px;
	border: 3px solid #ffffff !important;
	box-shadow: 0 0 0 1px var(--syn-border), 0 4px 14px rgba(15, 35, 70, 0.12);
}

/* grado come etichetta colorata */
dd.profile-rank {
	display: inline-block;
	margin: 0 0 12px !important;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #ffffff !important;
	background: linear-gradient(135deg, var(--syn-blue), #2f8ff0);
	box-shadow: 0 2px 8px rgba(10, 110, 209, 0.25);
}

dd.profile-rank br,
dd.profile-rank img {
	display: none !important;
}

/* indicatore "Online ora" */
.post.online dl.postprofile::after {
	content: "Online ora";
	display: block;
	margin-top: 10px;
	padding-left: 14px;
	font-size: 11px;
	font-weight: 600;
	color: #16a34a;
	background-image: radial-gradient(circle 4px at 4px 50%, #22c55e 0 4px, transparent 5px);
	background-repeat: no-repeat;
	background-position: left center;
}

/* data del messaggio con iconcina orologio */
p.author .icon.fa-file::before {
	content: "\f017";
}

/* ---------- mobile: la scheda autore torna una striscia in alto ---------- */
@media (max-width: 700px) {
	.post > .inner {
		display: block;
	}

	.postprofile {
		width: auto !important;
		float: none !important;
		display: flex;
		align-items: center;
		gap: 12px;
		text-align: left;
		padding: 12px 14px !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--syn-border) !important;
	}

	.postprofile img.avatar {
		width: 46px;
		height: 46px;
		max-width: 46px;
	}

	dd.profile-rank {
		margin: 0 !important;
	}

	.postbody {
		padding: 14px 16px 16px !important;
	}

	.post.online dl.postprofile::after {
		display: none;
	}
}

/* =====================================================================
   Icone argomenti personalizzate, tutte SVG inline:
   nessun file esterno, nessuna richiesta di terze parti.
   ===================================================================== */

/* topic-read */
dl.row-item.topic_read,
dl.row-item.topic_read_mine,
dl.row-item.topic_read_hot,
dl.row-item.topic_read_hot_mine {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='g0' x1='0' y1='0' x2='0.75' y2='1'%3E%3Cstop offset='0' stop-color='%23f1f4f9'/%3E%3Cstop offset='1' stop-color='%23e5eaf2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1.5' y='1.5' width='41' height='41' rx='13' fill='url(%23g0)' stroke='%23e2e8f1' stroke-width='1'/%3E%3Cg transform='translate(11 11) scale(0.9167)' fill='none' stroke='%2394a3b8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a3 3 0 0 1-3 3H8l-4 3V6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* topic-unread */
dl.row-item.topic_unread,
dl.row-item.topic_unread_mine,
dl.row-item.topic_unread_hot,
dl.row-item.topic_unread_hot_mine {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0' y1='0' x2='0.75' y2='1'%3E%3Cstop offset='0' stop-color='%23e7f2ff'/%3E%3Cstop offset='1' stop-color='%23d8e9ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1.5' y='1.5' width='41' height='41' rx='13' fill='url(%23g1)' stroke='%23c7defa' stroke-width='1'/%3E%3Cg transform='translate(11 11) scale(0.9167)' fill='none' stroke='%230a6ed1' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a3 3 0 0 1-3 3H8l-4 3V6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3z'/%3E%3C/g%3E%3Ccircle cx='35' cy='9' r='5.5' fill='%23ffffff'/%3E%3Ccircle cx='35' cy='9' r='3.6' fill='%2322c55e'/%3E%3C/svg%3E") !important;
}

/* sticky-read */
dl.row-item.sticky_read,
dl.row-item.sticky_read_mine {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='g2' x1='0' y1='0' x2='0.75' y2='1'%3E%3Cstop offset='0' stop-color='%23fff7e8'/%3E%3Cstop offset='1' stop-color='%23ffefd2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1.5' y='1.5' width='41' height='41' rx='13' fill='url(%23g2)' stroke='%23fae3b8' stroke-width='1'/%3E%3Cg transform='translate(11 11) scale(0.9167)' fill='none' stroke='%23e0940a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.4 5.2 5.6.7-4.1 3.9 1.1 5.6L12 16.2l-5.1 2.7 1.1-5.6-4.1-3.9 5.6-.7z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* sticky-unread */
dl.row-item.sticky_unread,
dl.row-item.sticky_unread_mine {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='g3' x1='0' y1='0' x2='0.75' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3dc'/%3E%3Cstop offset='1' stop-color='%23ffe9c2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1.5' y='1.5' width='41' height='41' rx='13' fill='url(%23g3)' stroke='%23f6d79b' stroke-width='1'/%3E%3Cg transform='translate(11 11) scale(0.9167)' fill='none' stroke='%23c97f06' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.4 5.2 5.6.7-4.1 3.9 1.1 5.6L12 16.2l-5.1 2.7 1.1-5.6-4.1-3.9 5.6-.7z'/%3E%3C/g%3E%3Ccircle cx='35' cy='9' r='5.5' fill='%23ffffff'/%3E%3Ccircle cx='35' cy='9' r='3.6' fill='%2322c55e'/%3E%3C/svg%3E") !important;
}

/* announce-read */
dl.row-item.announce_read,
dl.row-item.announce_read_mine,
dl.row-item.global_read,
dl.row-item.global_read_mine {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='g4' x1='0' y1='0' x2='0.75' y2='1'%3E%3Cstop offset='0' stop-color='%23eef4ff'/%3E%3Cstop offset='1' stop-color='%23e2ecff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1.5' y='1.5' width='41' height='41' rx='13' fill='url(%23g4)' stroke='%23d3e2fb' stroke-width='1'/%3E%3Cg transform='translate(11 11) scale(0.9167)' fill='none' stroke='%232f8ff0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h3l7 4V6l-7 4z'/%3E%3Cpath d='M17.5 9.2a4 4 0 0 1 0 5.6'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* announce-unread */
dl.row-item.announce_unread,
dl.row-item.announce_unread_mine,
dl.row-item.global_unread,
dl.row-item.global_unread_mine {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='g5' x1='0' y1='0' x2='0.75' y2='1'%3E%3Cstop offset='0' stop-color='%23e7f2ff'/%3E%3Cstop offset='1' stop-color='%23d8e9ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1.5' y='1.5' width='41' height='41' rx='13' fill='url(%23g5)' stroke='%23c7defa' stroke-width='1'/%3E%3Cg transform='translate(11 11) scale(0.9167)' fill='none' stroke='%230a6ed1' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h3l7 4V6l-7 4z'/%3E%3Cpath d='M17.5 9.2a4 4 0 0 1 0 5.6'/%3E%3C/g%3E%3Ccircle cx='35' cy='9' r='5.5' fill='%23ffffff'/%3E%3Ccircle cx='35' cy='9' r='3.6' fill='%2322c55e'/%3E%3C/svg%3E") !important;
}

/* locked-read */
dl.row-item.topic_read_locked,
dl.row-item.topic_read_locked_mine,
dl.row-item.sticky_read_locked,
dl.row-item.sticky_read_locked_mine,
dl.row-item.announce_read_locked,
dl.row-item.announce_read_locked_mine,
dl.row-item.global_read_locked,
dl.row-item.global_read_locked_mine {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='g6' x1='0' y1='0' x2='0.75' y2='1'%3E%3Cstop offset='0' stop-color='%23f6f7f9'/%3E%3Cstop offset='1' stop-color='%23eceff4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1.5' y='1.5' width='41' height='41' rx='13' fill='url(%23g6)' stroke='%23e2e8f1' stroke-width='1'/%3E%3Cg transform='translate(11 11) scale(0.9167)' fill='none' stroke='%2394a3b8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='9.5' rx='3'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* locked-unread */
dl.row-item.topic_unread_locked,
dl.row-item.topic_unread_locked_mine,
dl.row-item.sticky_unread_locked,
dl.row-item.sticky_unread_locked_mine,
dl.row-item.announce_unread_locked,
dl.row-item.announce_unread_locked_mine,
dl.row-item.global_unread_locked,
dl.row-item.global_unread_locked_mine {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='g7' x1='0' y1='0' x2='0.75' y2='1'%3E%3Cstop offset='0' stop-color='%23eef3fa'/%3E%3Cstop offset='1' stop-color='%23e2eaf5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1.5' y='1.5' width='41' height='41' rx='13' fill='url(%23g7)' stroke='%23d5e0ef' stroke-width='1'/%3E%3Cg transform='translate(11 11) scale(0.9167)' fill='none' stroke='%235b7796' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='9.5' rx='3'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/g%3E%3Ccircle cx='35' cy='9' r='5.5' fill='%23ffffff'/%3E%3Ccircle cx='35' cy='9' r='3.6' fill='%2322c55e'/%3E%3C/svg%3E") !important;
}

/* =====================================================================
   STEP 8 — Rifiniture per l'allineamento all'anteprima
   Etichette dei contatori, titolo dell'ultimo messaggio, paginazione.
   ===================================================================== */

/* ---------- etichette "Risposte" / "Visite" sotto le pillole ---------- */
@media (min-width: 701px) {
	ul.topiclist dl.row-item dd.posts dfn,
	ul.topiclist dl.row-item dd.views dfn {
		display: block !important;
		position: static !important;
		left: auto !important;
		width: auto !important;
		height: auto !important;
		overflow: visible !important;
		margin: 7px 0 0 !important;
		padding: 0 !important;
		font-size: 10px;
		font-style: normal;
		font-weight: 600;
		letter-spacing: 0.5px;
		line-height: 1.2;
		text-transform: uppercase;
		color: #a3b0c2;
	}

	ul.topiclist li.header dd.posts dfn,
	ul.topiclist li.header dd.views dfn {
		display: none !important;
	}
}

/* ---------- titolo dell'ultimo messaggio ---------- */
dd.lastpost a.lastsubject {
	display: block;
	max-width: 100%;
	margin-bottom: 3px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--syn-ink) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

dd.lastpost a.lastsubject:hover {
	color: var(--syn-blue) !important;
}

/* sul riquadro compatto per mobile il titolo sarebbe ridondante */
.responsive-show a.lastsubject {
	display: none !important;
}

/* autore e data sulla stessa riga, come nell'anteprima */
dd.lastpost br {
	display: none;
}

/* il titolo va sopra, autore e data sotto sulla stessa riga */
dd.lastpost > span {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 4px;
}

dd.lastpost a.lastsubject {
	order: -1;
	flex: 0 0 100%;
}

dd.lastpost time {
	display: inline !important;
	margin: 0 !important;
}

dd.lastpost time::before {
	content: "· ";
	color: #c3cedd;
}

/* ---------- paginazione compatta ---------- */
.pagination li a,
.pagination li span {
	box-sizing: border-box;
	min-width: 34px;
	padding: 0 8px;
}

/* =====================================================================
   STEP 9 — Wordmark "Synology Italia" col tricolore, al posto del
   titolo testuale nascosto (rimane per screen reader e SEO).
   ===================================================================== */

/* h1/descrizione originali: restano nel DOM per accessibilità e SEO,
   ma nascosti visivamente (li sostituisce il wordmark qui sotto) */
.headerbar .site-description h1,
.headerbar .site-description > p:not(.skiplink) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.headerbar .site-description {
	flex: 0 0 auto !important;
	overflow: visible !important;
}

.headerbar .site-wordmark {
	flex: 1 1 240px;
	min-width: 0;
}

.headerbar .site-wordmark .brand {
	display: flex;
	align-items: baseline;
	gap: 9px;
	flex-wrap: wrap;
}

.headerbar .site-wordmark .syn {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: #ffffff;
}

.headerbar .site-wordmark .ita {
	font-size: 26px;
	font-weight: 300;
	letter-spacing: -0.3px;
	color: rgba(255, 255, 255, 0.88);
}

.headerbar .site-wordmark .flagbar {
	display: flex;
	gap: 3px;
	height: 4px;
	width: 34px;
	border-radius: 3px;
	overflow: hidden;
	margin-top: 6px;
}

.headerbar .site-wordmark .flagbar span {
	flex: 1;
}

.headerbar .site-wordmark .flagbar .g {
	background: #008c45;
}

.headerbar .site-wordmark .flagbar .w {
	background: #f4f5f0;
}

.headerbar .site-wordmark .flagbar .r {
	background: #cd212a;
}

@media (max-width: 700px) {
	.headerbar .site-wordmark .syn,
	.headerbar .site-wordmark .ita {
		font-size: 20px;
	}
	.headerbar .site-wordmark .flagbar {
		width: 26px;
		margin-top: 4px;
	}
}

/* =====================================================================
   STEP 10 — Modulo di scrittura messaggio (posting.php) e pannelli
   generici (.panel), finora rimasti nello stile prosilver di serie.
   ===================================================================== */

/* pannello bianco con ombra, coerente con le card del resto del tema */
.panel {
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid var(--syn-border) !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(15, 35, 70, 0.05), 0 2px 10px rgba(15, 35, 70, 0.04);
}

.panel.bg2,
.panel.bg3 {
	background: #fbfcfe !important;
}

.panel .inner {
	padding: 18px 20px !important;
	box-sizing: border-box !important;
}

/* phpBB dimensiona via JS alcuni elementi del form (es. la toolbar
   BBCode #format-buttons) assumendo il padding di serie del pannello;
   con il nostro padding più ampio quel calcolo può eccedere lo spazio
   reale disponibile, causando scroll orizzontale su schermi stretti. */
.panel .inner fieldset,
.panel .inner #format-buttons {
	box-sizing: border-box !important;
	max-width: 100% !important;
}

@media (max-width: 700px) {
	.panel .inner {
		padding: 14px !important;
	}
}

/* titoli dei pannelli (es. "Rispondi al messaggio") */
.panel h3,
.panel h2 {
	color: var(--syn-ink) !important;
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 14px !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}

/* etichette dei campi */
#postingbox dl dt label,
.panel dl dt label {
	color: #5a6b82;
	font-weight: 600;
	font-size: 13px;
}

/* campi di testo: titolo argomento, messaggio, ecc */
#postingbox input.inputbox,
#postingbox textarea,
.panel input.inputbox,
.panel textarea {
	border: 1px solid var(--syn-border) !important;
	border-radius: 10px !important;
	padding: 8px 12px !important;
	font-size: 14px;
	color: var(--syn-ink);
	background: #ffffff !important;
	transition: border-color 0.16s, box-shadow 0.16s;
}

#postingbox input.inputbox:focus,
#postingbox textarea:focus,
.panel input.inputbox:focus,
.panel textarea:focus {
	border-color: var(--syn-blue) !important;
	box-shadow: 0 0 0 3px var(--syn-blue-light);
	outline: 0;
}

#message-box textarea {
	border-radius: 0 0 10px 10px !important;
}

/* pulsanti di invio (Invia, Anteprima, Salva bozza) */
input.button1,
input.button2 {
	border-radius: 999px !important;
	font-weight: 600;
	font-size: 13.5px;
	padding: 9px 18px !important;
	border: 1px solid var(--syn-border) !important;
	transition: transform 0.16s, box-shadow 0.16s, background 0.16s;
	cursor: pointer;
}

input.button1 {
	background: linear-gradient(135deg, var(--syn-blue), #2f8ff0) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	box-shadow: 0 2px 10px rgba(10, 110, 209, 0.25);
}

input.button1:hover {
	box-shadow: 0 5px 16px rgba(10, 110, 209, 0.32);
	transform: translateY(-1px);
}

input.button2 {
	background: #ffffff !important;
	color: var(--syn-blue) !important;
}

input.button2:hover {
	background: var(--syn-blue-light) !important;
	border-color: #cfe2fb !important;
}

/* tab "Opzioni messaggio" / "Allegati" */
.tabs ul.tabs,
div.tabs {
	border-bottom: 0 !important;
}

.tabs .tab a,
li.tab a {
	border-radius: 10px 10px 0 0 !important;
	background: #f3f6fb !important;
	color: #5a6b82 !important;
	font-weight: 600;
	font-size: 13px;
	border: 1px solid var(--syn-border) !important;
	border-bottom: 0 !important;
}

.tabs .activetab a,
li.tab.activetab a {
	background: #ffffff !important;
	color: var(--syn-blue-dark) !important;
}

/* checkbox e opzioni del pannello "Opzioni messaggio" */
#options-panel label {
	font-size: 13px;
	color: #3d4a5c;
}

/* =====================================================================
   STEP 11 — Gutter laterale su mobile
   prosilver stock annulla il padding di #wrap con margin orizzontale
   negativo (-5px) su header/navbar/forabg, pensato per un layout a
   piena larghezza senza angoli arrotondati. Con le card arrotondate
   del tema, questo fa toccare i contenitori al bordo dello schermo e
   la curva "sparisce" ai lati. Si riporta il margine a 0 e si allarga
   un poco il respiro laterale.
   ===================================================================== */
@media (max-width: 700px) {
	#wrap {
		padding: 0 10px !important;
	}

	.headerbar,
	.navbar,
	.forabg,
	.forumbg,
	.panel {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}