/*
 * Zvukoskop: dizajn sustav "fanzin".
 * Fotokopija, ljepljiva traka i signir: crna tinta na sivkastom papiru, žuti signir,
 * crveni pečat. Naslovi zbijeni i teški, datumi i pečati pisaćim strojem.
 * Radi u načinu "aplikacija" (plugin preuzima cijelu stranicu) i unutar bilo koje teme.
 */

/* Fontovi (lokalno, bez vanjskih poslužitelja) --------------------------- */
@font-face {
	font-family: "CM Display";
	font-style: normal;
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url(fonts/bricolage-grotesque-latin-ext-standard-normal.woff2) format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "CM Display";
	font-style: normal;
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url(fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2-variations");
	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: "CM Stamp";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/special-elite-latin-ext-400-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "CM Stamp";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/special-elite-latin-400-normal.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: "CM Text";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/instrument-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "CM Text";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/instrument-sans-latin-wght-normal.woff2) format("woff2-variations");
	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;
}

/* Tokeni ------------------------------------------------------------------ */
:root {
	--cm-paper: #f1f1ec;      /* papir za fotokopiranje */
	--cm-paper-2: #e2e2dc;    /* siva kopirke */
	--cm-surface: #fbfbf8;    /* svjež list */
	--cm-ink: #000;           /* toner */
	--cm-ink-2: #4b4b46;
	--cm-on-ink: #f1f1ec;
	--cm-marker: #ffe600;     /* signir */
	--cm-hot: #ff3d1f;        /* pečat */
	--cm-lilac: #c4b5ff;      /* naljepnica */
	--cm-hi: var(--cm-marker); /* naglasak na crnim blokovima */
	--cm-line: rgba(0, 0, 0, 0.16);
	--cm-line-strong: #000;
	--cm-soft: rgba(0, 0, 0, 0.05);
	--cm-ok: #12703f;
	--cm-warn: #8a5a00;
	--cm-danger: #c51d0a;
	--cm-dots: radial-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1.4px) 0 0 / 7px 7px;
	--cm-font-display: "CM Display", "Arial Narrow", sans-serif;
	--cm-font-stamp: "CM Stamp", "Courier New", monospace;
	--cm-font-text: "CM Text", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cm-gap: 16px;
	--cm-r-card: 0;
	--cm-r-field: 0;
	--cm-shell-h: 62px;
	--cm-tabbar-h: 64px;
	--cm-max: 1200px;
	--cm-grain-o: 0.09;
	/* Stari nazivi, da ostali moduli i tema rade bez izmjena. */
	--cm-pink: var(--cm-hot);
	--cm-pink-ink: #fff;
	--cm-blue: var(--cm-ink);
	--cm-sun: var(--cm-marker);
	--cm-accent: var(--cm-hot);
	--cm-accent-ink: #fff;
	--cm-muted: var(--cm-ink-2);
	--cm-radius: 0;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-cm-theme="light"]) {
		--cm-paper: #0e0e0d;
		--cm-paper-2: #1d1d1b;
		--cm-surface: #161615;
		--cm-ink: #f1f1ec;
		--cm-ink-2: #aaaaa2;
		--cm-on-ink: #0e0e0d;
		--cm-hot: #ff5a3d;
		--cm-lilac: #b3a2ff;
		--cm-hi: #c51d0a;
		--cm-line: rgba(241, 241, 236, 0.18);
		--cm-line-strong: #f1f1ec;
		--cm-soft: rgba(241, 241, 236, 0.06);
		--cm-ok: #5bd796;
		--cm-warn: #ffd34d;
		--cm-danger: #ff7a62;
		--cm-dots: radial-gradient(rgba(241, 241, 236, 0.16) 1px, transparent 1.4px) 0 0 / 7px 7px;
		--cm-grain-o: 0.07;
	}
}
:root[data-cm-theme="dark"] {
	--cm-paper: #0e0e0d;
	--cm-paper-2: #1d1d1b;
	--cm-surface: #161615;
	--cm-ink: #f1f1ec;
	--cm-ink-2: #aaaaa2;
	--cm-on-ink: #0e0e0d;
	--cm-hot: #ff5a3d;
	--cm-lilac: #b3a2ff;
	--cm-hi: #c51d0a;
	--cm-line: rgba(241, 241, 236, 0.18);
	--cm-line-strong: #f1f1ec;
	--cm-soft: rgba(241, 241, 236, 0.06);
	--cm-ok: #5bd796;
	--cm-warn: #ffd34d;
	--cm-danger: #ff7a62;
	--cm-dots: radial-gradient(rgba(241, 241, 236, 0.16) 1px, transparent 1.4px) 0 0 / 7px 7px;
	--cm-grain-o: 0.07;
}

/* Osnova u načinu aplikacije ------------------------------------------------ */
body.cm-app {
	margin: 0;
	background: var(--cm-paper);
	color: var(--cm-ink);
	font-family: var(--cm-font-text);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* Zrno fotokopije preko cijele stranice */
body.cm-app::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 99990;
	pointer-events: none;
	opacity: var(--cm-grain-o);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.cm-app a { color: var(--cm-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
body.cm-app a:hover { background: var(--cm-marker); color: #000 !important; }
body.cm-app h1,
body.cm-app h2,
body.cm-app h3,
body.cm-app h4 {
	font-family: var(--cm-font-display);
	font-weight: 800;
	font-stretch: 80%;
	line-height: 0.98;
	letter-spacing: -0.015em;
	color: var(--cm-ink);
	margin: 0 0 0.45em;
}
body.cm-app h1 { font-size: clamp(2.5rem, 9vw, 4.6rem); font-stretch: 75%; line-height: 0.92; letter-spacing: -0.025em; }
body.cm-app h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
body.cm-app h3 { font-size: 1.35rem; font-stretch: 85%; }
body.cm-app h4 { font-size: 1.1rem; font-stretch: 90%; }
body.cm-app p { margin: 0 0 0.8em; }
body.cm-app :focus-visible { outline: 3px solid var(--cm-hot); outline-offset: 2px; }
body.cm-app ::selection { background: var(--cm-marker); color: #000; }

.cm-skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 100001;
	padding: 10px 14px;
	background: var(--cm-ink);
	color: var(--cm-on-ink) !important;
}
.cm-skip:focus { top: 10px; }

/* Ljuska: zaglavlje, navigacija, podnožje ---------------------------------- */
.cm-shell-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--cm-paper);
	border-bottom: 2px solid var(--cm-ink);
}
.admin-bar .cm-shell-header { top: 32px; }
.cm-shell-bar {
	max-width: var(--cm-max);
	margin: 0 auto;
	height: var(--cm-shell-h);
	padding: 0 16px;
	display: flex;
	align-items: center;
	gap: 18px;
}
.cm-logo {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-family: var(--cm-font-display);
	font-weight: 800;
	font-stretch: 75%;
	font-size: 1.85rem;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--cm-ink) !important;
	text-decoration: none;
	white-space: nowrap;
}
body.cm-app .cm-logo:hover { background: none; color: var(--cm-ink) !important; }
.cm-logo span {
	display: inline-block;
	padding: 2px 6px 4px;
	background: var(--cm-ink);
	color: var(--cm-hi);
	transform: rotate(-3deg);
}
.cm-logo img { max-height: 38px; width: auto; }
.cm-nav { display: none; flex: 1; gap: 4px; }
.cm-nav a {
	padding: 6px 8px;
	color: var(--cm-ink) !important;
	font-weight: 600;
	font-size: 0.97rem;
	text-decoration: none;
	white-space: nowrap;
}
.cm-nav a[aria-current="page"] {
	background: linear-gradient(-1.5deg, transparent 18%, var(--cm-marker) 18% 82%, transparent 82%);
	color: #000 !important;
}
.cm-shell-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cm-icon-btn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	color: var(--cm-ink) !important;
	text-decoration: none;
	border: 0;
	background: transparent;
	cursor: pointer;
}
body.cm-app .cm-icon-btn:hover { background: var(--cm-marker); color: #000 !important; }
.cm-icon-btn svg, .cm-tabbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.cm-dot {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	background: var(--cm-hot);
	color: #fff;
	font: 700 11px/19px var(--cm-font-text);
	text-align: center;
	transform: rotate(6deg);
}
.cm-account {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 3px 12px 3px 3px;
	border: 2px solid var(--cm-ink);
	color: var(--cm-ink) !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.92rem;
	max-width: 220px;
}
.cm-account img, .cm-avatar {
	width: 30px;
	height: 30px;
	object-fit: cover;
	background: var(--cm-marker);
	display: inline-grid;
	place-items: center;
	font-family: var(--cm-font-display);
	font-weight: 800;
	color: #000;
	flex: none;
}
.cm-account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cm-main {
	max-width: var(--cm-max);
	margin: 0 auto;
	padding: 22px 16px calc(var(--cm-tabbar-h) + 32px + env(safe-area-inset-bottom));
	min-height: 60vh;
}
.cm-main--wide { max-width: none; padding-left: 0; padding-right: 0; }
.cm-page-title { margin-bottom: 20px; }
.cm-page-title h1 { margin: 0; }

.cm-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	height: calc(var(--cm-tabbar-h) + env(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--cm-ink);
	color: var(--cm-on-ink);
}
.cm-tabbar a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	color: color-mix(in srgb, var(--cm-on-ink) 72%, transparent) !important;
	text-decoration: none;
	font-size: 11.5px;
	font-weight: 600;
}
body.cm-app .cm-tabbar a:hover { background: none; color: var(--cm-on-ink) !important; }
.cm-tabbar a[aria-current="page"] { color: var(--cm-hi) !important; }
:root[data-cm-theme="dark"] .cm-tabbar a[aria-current="page"] { color: #000 !important; background: var(--cm-marker); }
@media (prefers-color-scheme: dark) { :root:not([data-cm-theme="light"]) .cm-tabbar a[aria-current="page"] { color: #000 !important; background: var(--cm-marker); } }
.cm-tabbar .cm-tabbar__plus span:first-child {
	display: grid;
	place-items: center;
	width: 40px;
	height: 34px;
	background: var(--cm-marker);
	color: #000;
	transform: rotate(-4deg);
}
.cm-tabbar .cm-tabbar__plus svg { stroke-width: 2.8; }
.cm-tabbar .cm-dot { top: 6px; right: calc(50% - 22px); }

.cm-shell-footer {
	background: var(--cm-ink);
	color: color-mix(in srgb, var(--cm-on-ink) 75%, transparent);
	padding: 36px 16px calc(var(--cm-tabbar-h) + 40px);
	font-size: 0.92rem;
}
.cm-shell-footer__in { max-width: var(--cm-max); margin: 0 auto; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cm-shell-footer .cm-logo { color: var(--cm-on-ink) !important; font-size: 2.4rem; }
.cm-shell-footer .cm-logo span { background: var(--cm-marker); color: #000; }
.cm-shell-footer h4 { font-family: var(--cm-font-stamp) !important; font-weight: 400 !important; font-stretch: 100% !important; font-size: 1rem !important; letter-spacing: 0 !important; color: var(--cm-hi) !important; margin-bottom: 10px; }
.cm-shell-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.cm-shell-footer a { color: var(--cm-on-ink) !important; text-decoration: none; }
body.cm-app .cm-shell-footer a:hover { background: var(--cm-marker); color: #000 !important; }
.cm-shell-footer .cm-btn { border-color: var(--cm-on-ink); color: var(--cm-on-ink) !important; }
.cm-theme-toggle { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cm-theme-toggle svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 600px) {
	.cm-shell-footer__in { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
	.cm-shell-footer__in > :first-child, .cm-shell-footer__in > :last-child { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
	.cm-nav { display: flex; }
	.cm-account { display: inline-flex; }
	.cm-tabbar { display: none; }
	.cm-main { padding-bottom: 64px; padding-top: 32px; }
	.cm-shell-footer { padding-bottom: 44px; }
	.cm-hide-desktop { display: none !important; }
}
@media (max-width: 959px) {
	.cm-hide-mobile { display: none !important; }
	.cm-ann-bar { font-size: 0.9rem; }
}
@media (max-width: 782px) {
	.admin-bar .cm-shell-header { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .cm-shell-header { top: 0; }
}

/* Osnova komponenti (radi i unutar teme) ----------------------------------- */
.cm {
	box-sizing: border-box;
	line-height: 1.55;
	color: var(--cm-ink);
	font-family: var(--cm-font-text);
}
.cm *, .cm *::before, .cm *::after { box-sizing: inherit; }
.cm img { max-width: 100%; height: auto; }
.cm h2, .cm h3, .cm h4 { font-family: var(--cm-font-display); font-weight: 800; font-stretch: 82%; line-height: 1; letter-spacing: -0.015em; }
.cm-muted { color: var(--cm-ink-2); font-size: 0.93em; }
.cm-section { margin: 0 0 44px; }
.cm-section > h2:first-child, .cm-section > h3:first-child { margin-top: 0; }
.cm-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--cm-ink);
}
.cm-section-head h2 { margin: 0; }
.cm-section-head a { font-family: var(--cm-font-stamp); white-space: nowrap; }

/* Gumbi: crni s pomakom u signiru */
.cm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 10px 18px;
	border: 2px solid var(--cm-ink);
	border-radius: 0;
	background: transparent;
	color: var(--cm-ink) !important;
	font: 700 0.95rem/1.15 var(--cm-font-text);
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.12s, transform 0.08s, box-shadow 0.08s;
	-webkit-tap-highlight-color: transparent;
}
.cm-btn:hover, body.cm-app .cm-btn:hover { background: var(--cm-marker); color: #000 !important; border-color: var(--cm-ink); }
.cm-btn:active { transform: translate(2px, 2px); }
.cm-btn--primary {
	background: var(--cm-ink);
	border-color: var(--cm-ink);
	color: var(--cm-on-ink) !important;
	box-shadow: 4px 4px 0 var(--cm-marker);
}
.cm-btn--primary:hover, body.cm-app .cm-btn--primary:hover { background: var(--cm-ink); color: var(--cm-hi) !important; }
.cm-btn--primary:active { box-shadow: 1px 1px 0 var(--cm-marker); transform: translate(3px, 3px); }
.cm-btn--danger { border-color: var(--cm-danger); color: var(--cm-danger) !important; }
.cm-btn--small { min-height: 34px; padding: 5px 12px; font-size: 0.86rem; }
.cm-btn--small.cm-btn--primary { box-shadow: 3px 3px 0 var(--cm-marker); }
.cm-btn[disabled] { opacity: 0.55; cursor: wait; }
.cm-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cm-actions details { flex-basis: 100%; }

/* Forme */
.cm-form { display: flex; flex-direction: column; gap: 14px; max-width: 680px; margin: 0 0 var(--cm-gap); }
.cm-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 0.95rem; }
.cm-form .cm-check, .cm-check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; display: flex; }
.cm-check input { margin-top: 4px; accent-color: var(--cm-ink); width: 18px; height: 18px; flex: none; }
.cm input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.cm select,
.cm textarea,
.cm-copy {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 2px solid var(--cm-ink);
	border-radius: 0;
	background: var(--cm-surface);
	color: var(--cm-ink);
	font: 400 16px/1.35 var(--cm-font-text);
	transition: box-shadow 0.1s;
}
.cm textarea { min-height: 96px; resize: vertical; }
.cm input:focus, .cm select:focus, .cm textarea:focus { outline: none; box-shadow: 4px 4px 0 var(--cm-marker); }
.cm input[type=file] { font: inherit; padding: 8px 0; }
.cm fieldset, .cm-form fieldset {
	border: 2px dashed var(--cm-ink);
	border-radius: 0;
	padding: 14px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.cm legend { font-family: var(--cm-font-stamp); font-size: 1.05rem; padding: 0 6px; background: var(--cm-paper); }
.cm-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.cm-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.cm-inline { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.cm-hp { position: absolute !important; left: -9999px !important; }
.cm-form-msg { margin: 0; padding: 10px 12px; border: 2px solid var(--cm-ok); color: var(--cm-ok); font-weight: 700; }
.cm-form-msg.is-error { border-color: var(--cm-danger); color: var(--cm-danger); }
.cm-form-msg[hidden] { display: none; }
.cm details > summary { cursor: pointer; font-weight: 700; padding: 6px 0; color: var(--cm-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.cm details[open] > summary { margin-bottom: 8px; }

/* Obavijesti, oznake */
.cm-notice {
	padding: 12px 16px;
	background: var(--cm-surface);
	border: 2px solid var(--cm-ink);
	border-left-width: 8px;
	margin: 0 0 var(--cm-gap);
}
.cm-notice--ok { border-left-color: var(--cm-ok); }
.cm-notice--warn { background: var(--cm-marker); color: #000; }
.cm-notice--warn a { color: #000 !important; }
/* Oznake kao traka s naljepnice za označavanje */
.cm-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 8px 2px;
	font-family: var(--cm-font-stamp);
	font-size: 0.82rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	background: var(--cm-ink);
	color: var(--cm-on-ink);
	vertical-align: middle;
	white-space: nowrap;
}
.cm-badge--accent { background: var(--cm-hot); color: #fff; }
.cm-badge--ok { background: transparent; color: var(--cm-ok); box-shadow: inset 0 0 0 1.5px currentColor; }
.cm-badge--warn { background: var(--cm-marker); color: #000; }
.cm-badge--earned { background: var(--cm-lilac); color: #000; }
.cm-stars { color: var(--cm-hot); letter-spacing: 1px; }
.cm-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

/* Mreže i kartice */
.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.cm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 14px;
	background: var(--cm-surface);
	border: 2px solid var(--cm-ink);
}
.cm-card h3, .cm-card h4 { margin: 2px 0 0; font-size: 1.45rem; line-height: 0.98; }
.cm-card h4 { font-size: 1.2rem; }
.cm-card p { margin: 0; }
.cm-card a { color: inherit; text-decoration: none; }
.cm-card h3 a::after { content: ""; position: absolute; inset: 0; }
.cm-card a:not(h3 a), .cm-card .cm-btn, .cm-card form, .cm-card details, .cm-card select, .cm-card input, .cm-card button { position: relative; z-index: 1; }
body.cm-app .cm-card h3 a:hover { background-color: transparent; }
.cm-card:has(h3 a):hover h3 a, .cm-card:has(h3 a:focus-visible) h3 a { background: linear-gradient(-1deg, transparent 12%, var(--cm-marker) 12% 88%, transparent 88%); color: #000; }
.cm-card-img {
	display: block;
	width: calc(100% + 28px);
	max-width: none;
	margin: -14px -14px 8px;
	aspect-ratio: 1;
	object-fit: cover;
	border-bottom: 2px solid var(--cm-ink);
	background: var(--cm-dots), var(--cm-paper-2);
}
/* Fotografije na karticama kao fotokopija; u boji kad se pokaže na karticu */
img.cm-card-img, .cm-spotlight__item img { filter: grayscale(1) contrast(1.18); transition: filter 0.2s; }
.cm-card:hover img.cm-card-img, .cm-card:focus-within img.cm-card-img, .cm-spotlight__item:hover img { filter: none; }
.cm-card--highlight { box-shadow: 6px 6px 0 var(--cm-hot); }
.cm-list { list-style: none; padding: 0; margin: 0 0 var(--cm-gap); }
.cm-list > li { padding: 12px 0; border-bottom: 1px solid var(--cm-line); }
.cm-list > li:last-child { border-bottom: 0; }
.cm-list > li > a:first-child { color: var(--cm-ink) !important; text-decoration: none; font-weight: 700; }
.cm-unread { font-weight: 700; }
.cm-unread td:first-child { box-shadow: inset 4px 0 0 var(--cm-hot); }

/* Vodoravni niz (koncerti, Spotlight) */
.cm-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(80vw, 290px);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 6px 16px 12px;
	margin: 0 -16px;
	scrollbar-width: none;
}
.cm-rail::-webkit-scrollbar { display: none; }
.cm-rail > * { scroll-snap-align: start; }

/* Tablice */
.cm-table-wrap { overflow-x: auto; margin: 0 0 var(--cm-gap); border: 2px solid var(--cm-ink); background: var(--cm-surface); }
.cm-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.cm-table th, .cm-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--cm-line); vertical-align: top; }
.cm-table tr:last-child td { border-bottom: 0; }
.cm-table th { font-family: var(--cm-font-stamp); font-weight: 400; font-size: 0.88rem; background: var(--cm-paper-2); border-bottom: 2px solid var(--cm-ink); }

/* Filteri i pretraga */
.cm-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 22px; }
.cm-filters label { display: grid; gap: 3px; flex: 1 1 150px; font-family: var(--cm-font-stamp); font-size: 0.85rem; font-weight: 400; color: var(--cm-ink-2); }
.cm-filters select, .cm-filters input, .cm-filters label input, .cm-filters label select { width: 100% !important; min-height: 44px !important; flex: none; font-family: var(--cm-font-text); font-size: 1rem; color: var(--cm-ink); }
.cm-filters > select, .cm-filters > input { width: auto !important; flex: 1 1 140px; }
.cm-filters .cm-btn { flex: none; }
.cm-search { flex-direction: row !important; max-width: none; }
.cm-search input { flex: 1; }
.cm-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; }
.cm-chips::-webkit-scrollbar { display: none; }
.cm-chip {
	flex: none;
	padding: 7px 13px;
	border: 2px solid var(--cm-ink);
	color: var(--cm-ink) !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.92rem;
	white-space: nowrap;
	background: var(--cm-surface);
}
body.cm-app .cm-chip:hover { background: var(--cm-marker); color: #000 !important; }
.cm-chip[aria-current="true"], .cm-chip.is-active { background: var(--cm-ink); color: var(--cm-hi) !important; transform: rotate(-2deg); }

.cm-pagination { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 24px 0; }
.cm-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-thumbs img { width: 96px; height: 96px; object-fit: cover; border: 2px solid var(--cm-ink); }
.cm-embed iframe, .cm-player iframe { width: 100%; border: 0; display: block; }
.cm-map { border: 2px solid var(--cm-ink); }

/* Datum koncerta: žuta naljepnica s trakom (potpisni element) --------------- */
.cm-ev-date {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: center;
	width: 70px;
	min-height: 80px;
	padding: 8px 4px 6px;
	background: var(--cm-marker);
	color: #000;
	border: 2px solid #000;
	line-height: 0.9;
	text-align: center;
	flex: none;
	transform: rotate(-3deg);
	margin-top: 4px;
}
.cm-ev-date::before {
	content: "";
	position: absolute;
	top: -9px;
	left: 50%;
	width: 42px;
	height: 15px;
	transform: translateX(-50%) rotate(4deg);
	background: rgba(235, 235, 225, 0.72);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(0.5px);
}
.cm-ev-dow, .cm-ev-mon { font-family: var(--cm-font-stamp); font-size: 0.9rem; color: #000; }
.cm-ev-day {
	font-family: var(--cm-font-display);
	font-weight: 800;
	font-stretch: 75%;
	font-size: 2.75rem;
	letter-spacing: -0.04em;
	color: #000;
}
.cm-event-card { padding: 0; overflow: visible; }
.cm-event-card .cm-card-img { margin: 0; width: 100%; aspect-ratio: 16 / 10; }
.cm-ev-row { display: flex; gap: 14px; padding: 14px 14px 10px; align-items: flex-start; }
.cm-event-card:has(.cm-card-img) .cm-ev-date { margin-top: -50px; z-index: 2; }
.cm-ev-body { min-width: 0; display: grid; gap: 4px; }
.cm-ev-body h3 { font-size: 1.55rem; overflow-wrap: anywhere; }
.cm-ev-lineup { font-weight: 700; }
.cm-card .cm-ev-body > *, .cm-card > .cm-ev-badges { margin: 0; }
.cm-ev-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.cm-ev-badges:empty { display: none; }
.cm-event-card.is-cancelled { opacity: 0.7; }
.cm-event-card.is-cancelled h3 { text-decoration: line-through; text-decoration-color: var(--cm-hot); text-decoration-thickness: 3px; }
.cm-event-card.is-cancelled .cm-ev-date { background: var(--cm-paper-2); }
.cm-day {
	position: sticky;
	top: calc(var(--cm-shell-h) + 6px);
	z-index: 3;
	display: inline-block;
	margin: 28px 0 14px;
	padding: 4px 12px 5px;
	background: var(--cm-ink);
	color: var(--cm-hi) !important;
	font-family: var(--cm-font-stamp) !important;
	font-weight: 400 !important;
	font-stretch: 100% !important;
	letter-spacing: 0 !important;
	font-size: 1.1rem !important;
	transform: rotate(-1deg);
}
.cm-day::first-letter { text-transform: uppercase; }

/* Javni profil ----------------------------------------------------------------- */
.cm-profile-head {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	margin: 0 0 36px;
}
.cm-profile-photo {
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1;
	object-fit: cover;
	border: 2px solid var(--cm-ink);
	box-shadow: 8px 8px 0 var(--cm-marker);
	transform: rotate(-1.5deg);
}
.cm-profile-meta h1, .cm-profile-meta h2 { margin: 0 0 8px; }
.cm-profile-meta p { margin: 0 0 8px; }
.cm-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.cm-links a { display: inline-block; padding: 5px 11px; border: 2px solid var(--cm-ink); color: var(--cm-ink) !important; text-decoration: none; font-weight: 700; font-size: 0.9rem; }
.cm-release { margin-bottom: 24px; }
.cm-tracklist { margin: 8px 0 0 22px; }
.cm-tracklist li::marker { font-family: var(--cm-font-stamp); }
.cm-represented { font-weight: 700; }
@media (min-width: 720px) {
	.cm-profile-head { grid-template-columns: minmax(200px, 340px) 1fr; gap: 40px; align-items: end; }
}

/* Koncert ---------------------------------------------------------------------- */
.cm-event-head { display: grid; gap: 22px; margin-bottom: 30px; }
.cm-event-poster { width: 100%; border: 2px solid var(--cm-ink); box-shadow: 8px 8px 0 var(--cm-marker); }
.cm-event-when { font-family: var(--cm-font-stamp); font-size: 1.15rem; }
@media (min-width: 720px) {
	.cm-event-head { grid-template-columns: minmax(220px, 360px) 1fr; }
	.cm-event-head:not(:has(img)) { grid-template-columns: 1fr; }
}

/* Dashboard -------------------------------------------------------------------- */
.cm-dashboard { display: grid; gap: 20px; }
.cm-dash-side { display: grid; gap: 12px; align-content: start; }
.cm-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	padding: 12px 14px;
	background: var(--cm-ink);
	color: var(--cm-on-ink);
}
.cm-switcher strong { font-family: var(--cm-font-display); font-stretch: 80%; font-size: 1.15rem; }
.cm-switcher a { color: var(--cm-hi) !important; }
.cm-switcher .cm-badge { background: var(--cm-marker); color: #000; }
.cm-switcher select { width: auto !important; min-height: 36px !important; padding: 4px 8px !important; border-color: var(--cm-on-ink) !important; }
.cm-switcher .cm-muted { color: color-mix(in srgb, var(--cm-on-ink) 70%, transparent); }
.cm details.cm-dash-menu > summary, .cm-dash-menu > summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 50px;
	padding: 10px 14px;
	border: 2px solid var(--cm-ink);
	color: var(--cm-ink) !important;
	background: var(--cm-surface);
	font-weight: 700;
	text-decoration: none;
	box-shadow: 4px 4px 0 var(--cm-marker);
	margin: 0;
}
.cm-dash-menu > summary::before { content: "Izbornik"; font-family: var(--cm-font-stamp); font-weight: 400; font-size: 0.85rem; color: var(--cm-ink-2); margin-right: auto; order: 2; padding-left: 10px; }
.cm-dash-menu > summary::-webkit-details-marker { display: none; }
.cm-dash-menu > summary::after { content: "▾"; font-size: 1.1em; order: 3; }
.cm-dash-menu[open] > summary::after { content: "▴"; }
.cm-tabs { display: grid; gap: 16px; padding: 14px 2px; }
.cm-tab-group h4 { margin: 0 0 4px; font-family: var(--cm-font-stamp) !important; font-weight: 400 !important; font-stretch: 100% !important; letter-spacing: 0 !important; font-size: 0.95rem !important; color: var(--cm-ink-2); }
.cm-tab-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cm-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	color: var(--cm-ink) !important;
	text-decoration: none;
	font-weight: 600;
}
body.cm-app .cm-tab:hover { background: var(--cm-marker); color: #000 !important; }
.cm-tab.is-active { background: var(--cm-ink); color: var(--cm-hi) !important; font-weight: 700; }
.cm-tab .cm-dot { position: static; transform: none; }
.cm-tab-panel { min-width: 0; }
.cm-tab-panel h3 { margin-top: 30px; }
.cm-tab-panel > h3:first-child, .cm-card h3 { margin-top: 0; }
.cm-panel-title { margin: 0 0 18px; font-size: clamp(2rem, 6vw, 2.9rem); }
@media (min-width: 960px) {
	.cm-dashboard { grid-template-columns: 270px minmax(0, 1fr); gap: 40px; align-items: start; }
	.cm-dash-side { position: sticky; top: calc(var(--cm-shell-h) + 18px); max-height: calc(100vh - var(--cm-shell-h) - 36px); overflow-y: auto; }
	.cm details.cm-dash-menu > summary, .cm-dash-menu > summary { display: none; }
	.cm-dashboard > .cm-notice { grid-column: 1 / -1; }
}

/* Statistika i napredak */
.cm-stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.cm-stat-tile { padding: 14px; background: var(--cm-surface); border: 2px solid var(--cm-ink); }
.cm-stat-tile span { display: block; font-family: var(--cm-font-stamp); font-size: 0.85rem; color: var(--cm-ink-2); }
.cm-stat-tile strong { font-family: var(--cm-font-display); font-stretch: 75%; font-size: 2.6rem; font-weight: 800; line-height: 1; }
.cm-spark { width: 100%; height: 90px; display: block; }
.cm-spark rect { fill: var(--cm-ink); }
.cm-bars { list-style: none; padding: 0; margin: 0; }
.cm-bars li { display: grid; grid-template-columns: minmax(90px, 40%) 1fr auto; gap: 8px; align-items: center; padding: 4px 0; font-size: 0.92rem; }
.cm-bars__bar { height: 12px; background: var(--cm-paper-2); overflow: hidden; }
.cm-bars__bar span { display: block; height: 100%; background: var(--cm-ink); }
.cm-bars__val { font-variant-numeric: tabular-nums; }
.cm-stat-block { padding: 14px; background: var(--cm-surface); border: 2px solid var(--cm-ink); }
.cm-stat-block h4 { margin-top: 0; }
.cm-progress { display: block; height: 12px; background: var(--cm-surface); box-shadow: inset 0 0 0 1.5px var(--cm-ink); overflow: hidden; }
.cm-progress > span { display: block; height: 100%; background: var(--cm-marker); box-shadow: inset 0 0 0 1.5px var(--cm-ink); }
.cm-rewards li { display: grid; grid-template-columns: 1fr minmax(80px, 160px) auto; gap: 10px; align-items: center; }
@media (max-width: 560px) { .cm-rewards li { grid-template-columns: 1fr; } }
.cm-price { font-family: var(--cm-font-display); font-stretch: 75%; font-size: 2.9rem; font-weight: 800; line-height: 1; margin: 6px 0 8px; }
.cm-plans .cm-card { border-width: 3px; }
.cm-paysim { max-width: 480px; }

/* Dođi pa dođem: dvije brojke */
.cm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cm-stat { padding: 14px; border: 2px solid var(--cm-ink); background: var(--cm-surface); font-weight: 700; line-height: 1.25; }
.cm-stat strong {
	display: inline-block;
	font-family: var(--cm-font-display);
	font-stretch: 75%;
	font-size: 3.6rem;
	font-weight: 800;
	line-height: 0.95;
	margin-bottom: 6px;
	padding: 0 0.08em;
	background: linear-gradient(-2deg, transparent 22%, var(--cm-marker) 22% 80%, transparent 80%);
	color: #000;
}
:root[data-cm-theme="dark"] .cm-stat strong { color: #000; }
.cm-stat .cm-muted { font-weight: 400; font-size: 0.86rem; }

/* Ljestvica: kataloški brojevi */
.cm-chart-list { list-style: none; padding: 0; margin: 0 0 24px; counter-reset: cmchart; }
.cm-chart-item { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 0; border-bottom: 2px solid var(--cm-ink); }
.cm-chart-list:not(.cm-chart-list--results) .cm-chart-item { grid-template-columns: 1fr auto; }
.cm-chart-list:not(.cm-chart-list--results) .cm-chart-item > details { grid-column: 1 / -1; }
.cm-chart-pos { font-family: var(--cm-font-display); font-stretch: 75%; font-weight: 800; font-size: 2.6rem; min-width: 1.6em; color: var(--cm-ink); line-height: 1; }
.cm-chart-pos::before, .cm-mini-chart b::before { content: "No."; font-family: var(--cm-font-stamp); font-weight: 400; font-size: 0.4em; margin-right: 2px; vertical-align: 0.9em; letter-spacing: 0; }
.cm-chart-meta { grid-column: 1 / -1; font-size: 0.85rem; }
.cm-chart-move { font-family: var(--cm-font-stamp); font-size: 0.82rem; color: var(--cm-ink-2); }
.cm-chart-move--up { color: var(--cm-ok); }
.cm-chart-move--down { color: var(--cm-danger); }
.cm-chart-move--new { color: var(--cm-hot); }
.cm-award-winner { font-family: var(--cm-font-display); font-stretch: 80%; font-size: 1.9rem; font-weight: 800; }

/* Poruke */
.cm-chat { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 2px solid var(--cm-ink); background: var(--cm-dots), var(--cm-paper-2); margin-bottom: 12px; }
.cm-msg { max-width: 82%; padding: 9px 13px; background: var(--cm-surface); border: 2px solid var(--cm-ink); align-self: flex-start; overflow-wrap: anywhere; }
.cm-msg.is-mine { align-self: flex-end; background: var(--cm-ink); color: var(--cm-on-ink); }
.cm-msg.is-mine .cm-muted { color: color-mix(in srgb, var(--cm-on-ink) 70%, transparent); }
.cm-msg.is-mine a { color: var(--cm-hi) !important; }

/* Dođi pa dođem: ulaz i dolazak */
.cm-social-proof { font-size: 1.1rem; font-weight: 700; }
.cm-door { text-align: center; }
.cm-door-qr { display: inline-block; padding: 16px; background: #fff; border: 2px solid #000; box-shadow: 8px 8px 0 var(--cm-marker); }
.cm-door-qr img, .cm-door-qr canvas { margin: 0 auto; }
.cm-door-code, .cm-door-stage { font-family: var(--cm-font-stamp); letter-spacing: 0.14em; }
.cm-door-code { font-size: 2rem; }
.cm-door-stage { font-size: 3rem; color: var(--cm-hot); }
.cm-come-and-go details { margin-top: 10px; }

/* Spotlight */
.cm-spotlight { margin: 0 0 44px; }
.cm-spotlight__head h2 { margin-bottom: 12px; }
.cm-spotlight__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(46vw, 210px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: none; }
.cm-spotlight__track::-webkit-scrollbar { display: none; }
.cm-spotlight__item { scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--cm-ink) !important; }
body.cm-app .cm-spotlight__item:hover { background: none; color: var(--cm-ink) !important; }
.cm-spotlight__item img, .cm-spotlight__ph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 2px solid var(--cm-ink); background: var(--cm-dots), var(--cm-paper-2); display: block; }
.cm-spotlight__item strong { font-family: var(--cm-font-display); font-stretch: 80%; font-size: 1.35rem; font-weight: 800; line-height: 1; margin-top: 4px; }
.cm-spotlight__item span { color: var(--cm-ink-2); font-size: 0.88rem; }
.cm-spotlight__item--cta .cm-spotlight__ph { aspect-ratio: auto; height: 110px; display: grid; place-items: center; border-style: dashed; font-family: var(--cm-font-display); font-size: 3rem; font-weight: 800; color: var(--cm-ink); }
.cm-spotlight__item--cta:hover .cm-spotlight__ph { background: var(--cm-marker); color: #000; }
.cm-featured { margin-bottom: 44px; }
.cm-showcase-top .cm-event-card { box-shadow: 6px 6px 0 var(--cm-hot); }

/* Oglasni prostor */
.cm-ad { position: relative; margin: 22px auto; max-width: min(100%, var(--cm-ad-w, 728px)); }
.cm-ad img { display: block; width: 100%; height: auto; border: 2px solid var(--cm-ink); }
.cm-ad__tag { position: absolute; top: 6px; right: 6px; font-family: var(--cm-font-stamp); font-size: 11px; padding: 1px 7px; background: #000; color: #fff; }
.cm-ad--empty a { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; min-height: min(var(--cm-ad-h, 90px), 120px); border: 2px dashed var(--cm-ink); text-decoration: none; color: var(--cm-ink) !important; text-align: center; padding: 14px; background: var(--cm-dots), transparent; }
body.cm-app .cm-ad--empty a:hover { background: var(--cm-marker); color: #000 !important; }
.cm-ad__label { font-family: var(--cm-font-display); font-stretch: 80%; font-weight: 800; font-size: 1.35rem; }
.cm-ad__sub { font-family: var(--cm-font-stamp); font-size: 0.85rem; color: var(--cm-ink-2); }
.cm-ad-wrap { padding: 0 16px; }
.cm-ad-wrap--header .cm-ad { margin: 10px auto; }
.cm-highlight td { background: color-mix(in srgb, var(--cm-marker) 40%, transparent); }

/* Najave */
.cm-ann-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: center; padding: 9px 16px; background: var(--cm-marker); color: #000; text-align: center; border-bottom: 2px solid #000; }
.cm-ann-bar strong { font-family: var(--cm-font-stamp); font-weight: 400; }
.cm-ann-bar a { color: #000 !important; }
.cm-ann-bar .cm-btn { min-height: 32px; padding: 4px 12px; border-color: #000; color: #000 !important; background: transparent; box-shadow: none; }
.cm-ann-close { background: none; border: 0; color: inherit; font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px; }
.cm-ann-popup { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(0, 0, 0, 0.6); }
.cm-ann-popup[hidden] { display: none; }
.cm-ann-popup__box { width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); background: var(--cm-surface); color: var(--cm-ink); border-top: 3px solid var(--cm-ink); }
.cm-ann-popup__box img { width: 100%; height: auto; border: 2px solid var(--cm-ink); margin-bottom: 12px; }
.cm-ann-popup__box h2 { font-size: 2.3rem; }
@media (min-width: 720px) {
	.cm-ann-popup { align-items: center; padding: 16px; }
	.cm-ann-popup__box { border: 3px solid var(--cm-ink); box-shadow: 10px 10px 0 var(--cm-marker); transform: rotate(-0.6deg); }
}
.cm-switch-bar { position: fixed; bottom: calc(var(--cm-tabbar-h) + 12px); left: 50%; transform: translateX(-50%); z-index: 99998; background: var(--cm-ink); color: var(--cm-on-ink); padding: 9px 16px; font-size: 14px; max-width: calc(100% - 32px); box-shadow: 4px 4px 0 var(--cm-marker); }
.cm-switch-bar a { color: var(--cm-hi) !important; }

/* Razno */
.cm-tour-stop--confirmed summary { color: var(--cm-ok); }
.cm-tour-stop--off summary { color: var(--cm-ink-2); }
.cm-suggest { border-top: 1px solid var(--cm-line); margin-top: 8px; padding-top: 8px; }
.cm-inbox-head { display: flex; gap: 12px; align-items: flex-start; }
.cm-inbox-head img { border: 2px solid var(--cm-ink); flex: none; }
.cm-track { padding: 10px 0; border-top: 1px solid var(--cm-line); }
.cm-episode { padding: 14px 0; border-bottom: 2px solid var(--cm-ink); }
.cm-rules li { margin-bottom: 8px; }
.cm-reviews p { margin: 6px 0 0; }
.cm-report > summary { font-size: 0.85rem; color: var(--cm-ink-2) !important; }
.cm-claim { border: 2px dashed var(--cm-ink) !important; border-radius: 0 !important; background: var(--cm-surface); }
.cm-claim__badge { border-radius: 0 !important; background: var(--cm-marker) !important; color: #000 !important; font-family: var(--cm-font-stamp); font-weight: 400 !important; }
.cm-claim__code { font-family: var(--cm-font-stamp) !important; }

/* Glavni hub (naslovnica) ------------------------------------------------------- */
.cm-hub { display: grid; gap: 8px; }
.cm-hub-hero { position: relative; padding: 10px 0 24px; }
.cm-hub-hero h1 {
	font-size: clamp(3.4rem, 16vw, 8rem);
	line-height: 0.86;
	letter-spacing: -0.035em;
	margin: 0 0 16px;
}
@media (max-width: 959px) { .cm-hub-hero h1 { max-width: 12ch; } }
.cm-hub-hero h1 .cm-hub-city {
	display: inline;
	padding: 0 0.06em;
	color: #000;
	background: linear-gradient(-2deg, transparent 14%, var(--cm-marker) 14% 84%, transparent 84%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.cm-hub-hero p { max-width: 44ch; font-size: 1.06rem; color: var(--cm-ink-2); }
.cm-hub-hero .cm-chips { margin: 18px -16px 20px; padding: 4px 16px 6px; }
.cm-hub-tonight .cm-event-card { height: 100%; }
.cm-hub-cols { display: grid; gap: 44px; }
.cm-hub-join {
	position: relative;
	display: grid;
	gap: 16px;
	padding: 28px 20px;
	background: var(--cm-ink);
	color: var(--cm-on-ink);
}
.cm-hub-join::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 24px;
	width: 70px;
	height: 18px;
	transform: rotate(-5deg);
	background: rgba(235, 235, 225, 0.75);
}
.cm-hub-join h2 { color: var(--cm-on-ink) !important; margin: 0; font-size: clamp(2.4rem, 8vw, 3.6rem); font-stretch: 75% !important; }
.cm-hub-join p { color: color-mix(in srgb, var(--cm-on-ink) 80%, transparent); margin: 0; max-width: 52ch; }
.cm-hub-join .cm-btn:not(.cm-btn--primary) { border-color: var(--cm-on-ink); color: var(--cm-on-ink) !important; }
.cm-hub-join .cm-btn:not(.cm-btn--primary):hover { color: #000 !important; }
.cm-hub-join .cm-btn--primary { background: var(--cm-marker); border-color: var(--cm-marker); color: #000 !important; box-shadow: 4px 4px 0 var(--cm-hot); }
.cm-hub-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; }
.cm-hub-roles a { display: block; padding: 12px; border: 2px solid color-mix(in srgb, var(--cm-on-ink) 35%, transparent); color: var(--cm-on-ink) !important; text-decoration: none; }
.cm-hub-roles a strong { display: block; font-family: var(--cm-font-display); font-stretch: 80%; font-weight: 800; font-size: 1.35rem; }
.cm-hub-roles a span { font-size: 0.86rem; opacity: 0.8; }
body.cm-app .cm-hub-roles a:hover { border-color: var(--cm-marker); background: var(--cm-marker); color: #000 !important; }
.cm-mini-chart { list-style: none; padding: 0; margin: 0; }
.cm-mini-chart li { display: grid; grid-template-columns: 3em 1fr; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--cm-line); }
.cm-mini-chart b { font-family: var(--cm-font-display); font-stretch: 75%; font-size: 1.9rem; font-weight: 800; color: var(--cm-ink); line-height: 1; }
.cm-mini-chart li:first-child b { color: var(--cm-hot); }
.cm-mini-chart a { color: var(--cm-ink) !important; text-decoration: none; font-weight: 700; }
.cm-podzemna-strip { display: grid; gap: 12px; padding: 18px; border: 2px solid var(--cm-ink); background: var(--cm-lilac); color: #000; }
.cm-podzemna-strip h2 { margin: 0; color: #000 !important; }
.cm-podzemna-strip .cm-muted { color: #222; }
.cm-podzemna-strip a { color: #000 !important; }
.cm-podzemna-strip .cm-btn { border-color: #000; color: #000 !important; }
.cm-hub-stats { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--cm-ink-2); font-family: var(--cm-font-stamp); font-size: 0.92rem; padding-top: 14px; border-top: 2px solid var(--cm-ink); }
.cm-hub-stats b { font-family: var(--cm-font-display); font-stretch: 75%; font-weight: 800; font-size: 1.8rem; color: var(--cm-ink); margin-right: 4px; }
@media (min-width: 960px) {
	.cm-hub-hero { padding-top: 28px; }
	.cm-hub-cols { grid-template-columns: 1.6fr 1fr; align-items: start; gap: 48px; }
	.cm-rail { grid-auto-columns: 290px; margin: 0; padding: 6px 4px 12px; }
	.cm-hub-tonight.cm-rail { grid-auto-columns: minmax(270px, 1fr); }
	.cm-hub-join { grid-template-columns: 1fr 1fr; align-items: center; padding: 40px; }
}

/* Naslovnica bez slike: izrezana slova (svako iz drugog novinskog izvora) ---- */
.cm-ph {
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--cm-dots), var(--cm-paper-2);
}
.cm-card-img.cm-ph { background: var(--cm-dots), var(--cm-paper-2); }
.cm-ph__w { display: inline-flex; align-items: center; gap: 2px; }
.cm-ph__l {
	display: inline-block;
	padding: 0.06em 0.12em 0.1em;
	font-family: var(--cm-font-display);
	font-weight: 800;
	font-stretch: 75%;
	font-size: clamp(3rem, 14vw, 5.4rem);
	line-height: 0.86;
	background: #000;
	color: #f1f1ec;
	transform: rotate(-6deg);
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}
.cm-ph__l:nth-child(2) { font-family: var(--cm-font-stamp); font-weight: 400; background: var(--cm-marker); color: #000; transform: rotate(5deg) translateY(6%); }
.cm-ph__l:nth-child(3) { background: var(--cm-hot); color: #fff; transform: rotate(-2deg); }
.cm-ph--1 { background: var(--cm-marker); }
.cm-ph--1 .cm-ph__l:nth-child(2) { background: #f1f1ec; }
.cm-ph--2 { background: radial-gradient(rgba(241, 241, 236, 0.2) 1px, transparent 1.4px) 0 0 / 7px 7px, #000; }
.cm-ph--2 .cm-ph__l:first-child { background: #f1f1ec; color: #000; }
.cm-ph--3 { background: var(--cm-dots), var(--cm-lilac); }
.cm-ph--3 .cm-ph__l:first-child { background: var(--cm-hot); color: #fff; transform: rotate(4deg); }
.cm-ph--3 .cm-ph__l:nth-child(2) { transform: rotate(-5deg); }
.cm-spotlight__ph.cm-ph .cm-ph__l { font-size: 3.8rem; }
.cm-profile-photo--empty.cm-ph .cm-ph__l, .cm-profile-photo--empty .cm-ph__l { font-size: clamp(5rem, 22vw, 9rem); }
.cm-profile-photo--empty { display: grid; place-items: center; overflow: hidden; }
@media (max-width: 719px) { .cm-profile-photo--empty { max-width: 190px; } }

/* Hub: izdanja i novi profili kao vodoravni niz na mobitelu */
@media (max-width: 959px) {
	.cm-hub-strip.cm-grid {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: min(44vw, 190px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin: 0 -16px;
		padding: 4px 16px 12px;
		scrollbar-width: none;
	}
	.cm-hub-strip::-webkit-scrollbar { display: none; }
	.cm-hub-strip > * { scroll-snap-align: start; }
	.cm-hub-strip .cm-card h3 { font-size: 1.2rem; }
	.cm-hub-strip .cm-ph__l { font-size: 3.2rem; }
}
@media (min-width: 960px) {
	.cm-hub-strip.cm-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
	.cm-hub-strip .cm-ph__l { font-size: 3.8rem; }
}

/* Mobitel: gušći raspored */
@media (max-width: 600px) {
	.cm-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.cm-grid > .cm-event-card, .cm-grid > .cm-call-card, .cm-grid > .cm-favor, .cm-grid > .cm-sponsor-package, .cm-grid > .cm-lastminute, .cm-grid > .cm-stat-block, .cm-grid > form { grid-column: 1 / -1; }
	.cm-card h3 { font-size: 1.25rem; }
	.cm-grid .cm-ph__l { font-size: 2.9rem; }
	.cm-table { font-size: 0.88rem; }
	.cm-table th, .cm-table td { padding: 9px 8px; }
	.cm-section { margin-bottom: 36px; }
	.cm-form-row { grid-template-columns: 1fr; }
	.cm-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.cm-filters > label:first-child { grid-column: 1 / -1; }
	.cm-filters .cm-btn { width: 100%; }
}
@media (max-width: 360px) {
	.cm-grid { grid-template-columns: 1fr; }
}

/* Zaštita od vodoravnog prelijevanja: djeca mreža smiju se suziti */
html, body.cm-app { overflow-x: clip; }
.cm-main > *, .cm-hub > *, .cm-hub-cols > *, .cm-section { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
	.cm *, .cm-btn, img.cm-card-img { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
	body.cm-app::after { display: none; }
	.cm-shell-header, .cm-tabbar, .cm-shell-footer, .cm-ad, .cm-ann-bar { display: none !important; }
}

/* Sidrena cijena: uvijek uz cijenu, čitljivo, bez isticanja jačeg od same cijene */
.cm-anchor { display: inline-block; font-family: var(--cm-font-stamp); font-size: 0.86rem; line-height: 1.35; color: var(--cm-ink-2); }
.cm-card > p:has(> .cm-anchor:only-child) { margin-top: -10px; }
.cm-ad--empty .cm-anchor, .cm-spotlight__item .cm-anchor { font-size: 0.8rem; }
.cm-table .cm-anchor { font-size: 0.8rem; white-space: nowrap; }
.cm-pricelist-table td:nth-child(2), .cm-pricelist-table td:nth-child(3) { white-space: nowrap; }

/* ==========================================================================
 * 0.14: poruke, player, postava, kartica stranke, shop, traži se bend, oglasi,
 * partneri i ostali novi dijelovi
 * ========================================================================== */

.cm-section-lead { max-width: 68ch; margin: -4px 0 16px; font-size: 1.02rem; line-height: 1.5; }
.cm-form--wide { max-width: 920px; }
.cm-field { display: flex; flex-direction: column; gap: 8px; }
.cm-field__label { font-weight: 700; font-size: 0.95rem; }
.cm-btn--block { display: flex; width: 100%; }
.cm-btn--disabled, .cm-btn--disabled:hover { opacity: 0.5; cursor: not-allowed; background: transparent !important; color: var(--cm-ink) !important; border-style: dashed; }

/* Kvačica kao kartica (newsletter, razlog slanja) */
.cm-form .cm-check--card, .cm-check--card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 10px;
	padding: 12px 14px;
	border: 2px solid var(--cm-ink);
	background: var(--cm-surface);
	cursor: pointer;
}
.cm-check--card input { grid-row: 1 / span 2; }
.cm-check--card small { grid-column: 2; color: var(--cm-ink-2); font-size: 0.86rem; line-height: 1.4; }
.cm-check--card:has(input:checked) { box-shadow: 5px 5px 0 var(--cm-marker); }
.cm-check--card:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.cm-chip-select { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
form.cm-chip-select { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.cm-chip-select select { width: auto; min-height: 38px; padding: 6px 10px; }

/* Ponavljajući redovi (postava, pjesme, popis za ZAMP) */
.cm-rows { display: flex; flex-direction: column; gap: 10px; }
.cm-row-item { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 2px solid var(--cm-ink); background: var(--cm-surface); }
.cm-row-item > [data-cm-remove-row] { align-self: flex-start; }
.cm-zamp-row .cm-form-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cm-sticky-save { position: sticky; bottom: calc(var(--cm-tabbar-h) + 8px); z-index: 5; display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--cm-paper); border: 2px solid var(--cm-ink); box-shadow: 0 -6px 0 var(--cm-paper); }
@media (min-width: 900px) { .cm-sticky-save { bottom: 8px; } }
.cm-sticky-save .cm-form-msg { flex: 1; }

/* Upload */
.cm-upload { display: flex; flex-direction: column; gap: 6px; }
.cm-upload-prev { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 0; }
.cm-upload-prev img { width: 88px; height: 88px; object-fit: cover; border: 2px solid var(--cm-ink); }
.cm-upload-prev.is-loading { min-height: 48px; background: repeating-linear-gradient(-45deg, var(--cm-paper-2) 0 10px, var(--cm-marker) 10px 20px); background-size: 200% 100%; animation: cm-stripes 1s linear infinite; }
@keyframes cm-stripes { to { background-position: 28px 0; } }
.cm-file { display: inline-block; padding: 4px 10px; font-family: var(--cm-font-stamp); font-size: 0.9rem; border: 2px dashed var(--cm-ink); overflow-wrap: anywhere; }
.cm-audio-note { display: block; flex-basis: 100%; }
.cm-audio-note.is-warn { padding: 4px 8px; background: var(--cm-marker); color: #000; }

/* Mjesta */
.cm-place-new { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 6px; }
.cm-place-new[hidden] { display: none; }
.cm-scope-checks { display: flex; flex-direction: column; gap: 10px; }
.cm-scope-checks .cm-checks { padding-left: 28px; }
.cm-gig-area { margin: 6px 0 0; }

/* MP3 player: velika tipka, tanka traka, vrijeme pisaćim strojem */
.cm-player { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 10px 6px 6px; border: 2px solid var(--cm-ink); background: var(--cm-surface); min-width: 0; }
.cm-play {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	padding: 0;
	border: 2px solid var(--cm-ink);
	border-radius: 50%;
	background: var(--cm-ink);
	color: var(--cm-on-ink);
	cursor: pointer;
	text-decoration: none !important;
}
.cm-play:hover { background: var(--cm-hot); border-color: var(--cm-ink); }
.cm-play__icon { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.cm-player.is-playing .cm-play__icon { width: 12px; height: 14px; margin: 0; border: 0; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.cm-play--link { width: 36px; height: 36px; background: transparent; color: var(--cm-ink); }
.cm-player__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cm-player__title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-player__bar { display: block; height: 4px; background: var(--cm-paper-2); }
.cm-player__bar span { display: block; height: 100%; width: 0; background: var(--cm-hot); }
.cm-player__time { font-family: var(--cm-font-stamp); font-size: 0.82rem; color: var(--cm-ink-2); white-space: nowrap; }
.cm-player audio { display: none; }
.cm-tracks { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; padding: 0; list-style: none; }
.cm-tracks > li { padding: 6px 0; border-bottom: 1px solid var(--cm-line); }
.cm-track .cm-player { margin-top: 6px; }

/* Glazba na profilu */
.cm-releases { display: grid; gap: 22px; }
.cm-release { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; }
.cm-release__cover { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--cm-ink); box-shadow: 5px 5px 0 var(--cm-ink); }
div.cm-release__cover { font-size: 1.4rem; }
.cm-release__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cm-release__body h3 { margin: 0; font-size: 1.6rem; }
@media (max-width: 560px) {
	.cm-release { grid-template-columns: 96px 1fr; gap: 12px; }
	.cm-release__body h3 { font-size: 1.3rem; }
}

/* Postava i tim */
.cm-lineup { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--cm-ink); }
.cm-lineup li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--cm-line); }
.cm-lineup strong { font-family: var(--cm-font-display); font-stretch: 85%; font-size: 1.25rem; line-height: 1.05; }
.cm-lineup span { font-family: var(--cm-font-stamp); font-size: 0.88rem; color: var(--cm-ink-2); }
.cm-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cm-team__member form { margin: 6px 0 0; }
.cm-epk .cm-actions { margin-top: 4px; }

/* Kartica stranke u ponudi: sve na jednom mjestu */
.cm-party { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 2px solid var(--cm-ink); background: var(--cm-surface); box-shadow: 6px 6px 0 var(--cm-lilac); }
.cm-party__head { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.cm-party__head img, .cm-party__ph { width: 64px; height: 64px; object-fit: cover; border: 2px solid var(--cm-ink); }
.cm-party__ph { display: grid; place-items: center; font-family: var(--cm-font-display); font-weight: 800; font-size: 1.8rem; background: var(--cm-marker); color: #000; }
.cm-party__head h3, .cm-party__head h4 { margin: 0; }
.cm-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.cm-facts dt { font-family: var(--cm-font-stamp); font-size: 0.88rem; color: var(--cm-ink-2); }
.cm-facts dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .cm-facts { grid-template-columns: 1fr; } .cm-facts dd { margin-bottom: 6px; } }
.cm-party__music { display: flex; flex-direction: column; gap: 6px; }
.cm-offer-preview { margin: 0 0 12px; padding: 12px 14px; border-left: 6px solid var(--cm-marker); background: var(--cm-soft); }

/* Poruke: dva stupca na računalu, jedan na mobitelu */
.cm-inbox { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; border: 2px solid var(--cm-ink); background: var(--cm-surface); min-height: 520px; }
.cm-inbox__list { border-right: 2px solid var(--cm-ink); display: flex; flex-direction: column; min-width: 0; }
.cm-inbox__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 2px solid var(--cm-ink); }
.cm-inbox__empty { padding: 12px; }
.cm-inbox__threads { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 70vh; }
.cm-inbox__threads li { border-bottom: 1px solid var(--cm-line); }
.cm-inbox__threads a { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; color: var(--cm-ink) !important; text-decoration: none !important; }
.cm-inbox__threads a:hover { background: var(--cm-soft); }
.cm-inbox__threads li.is-active a { background: var(--cm-marker); color: #000 !important; }
.cm-inbox__threads li.is-unread .cm-inbox__name { font-weight: 800; }
.cm-inbox__threads li.is-unread .cm-inbox__time::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; background: var(--cm-hot); vertical-align: middle; }
.cm-inbox__av { display: grid; place-items: center; width: 40px; height: 40px; flex: none; object-fit: cover; border: 2px solid var(--cm-ink); background: var(--cm-ink); color: var(--cm-on-ink); font-family: var(--cm-font-display); font-weight: 800; }
.cm-inbox__txt { display: flex; flex-direction: column; min-width: 0; }
.cm-inbox__name, .cm-inbox__snip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-inbox__snip { font-size: 0.88rem; color: var(--cm-ink-2); }
.cm-inbox__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cm-inbox__time { font-family: var(--cm-font-stamp); font-size: 0.78rem; color: var(--cm-ink-2); white-space: nowrap; }
.cm-inbox__pane { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-width: 0; }
.cm-inbox__pane--empty { place-items: center; justify-content: center; align-items: center; background: var(--cm-dots), var(--cm-paper-2); }
.cm-inbox__bar { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--cm-ink); }
.cm-inbox__back { display: none; font-size: 1.4rem; font-weight: 800; color: var(--cm-ink) !important; text-decoration: none !important; padding: 0 6px; }
.cm-inbox .cm-chat { flex: 1; min-height: 280px; margin: 0; }
.cm-chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.cm-chat-form textarea { min-height: 52px; }
.cm-chat-hint { margin: 0; font-size: 0.8rem; }
.cm-msg__meta { display: block; font-family: var(--cm-font-stamp); font-size: 0.76rem; opacity: 0.75; margin-bottom: 2px; }
.cm-msg.is-system { align-self: center; max-width: 92%; background: var(--cm-marker); color: #000; border-style: dashed; text-align: center; }
.cm-suggest-list { list-style: none; margin: -6px 0 0; padding: 0; border: 2px solid var(--cm-ink); background: var(--cm-surface); max-height: 260px; overflow-y: auto; }
.cm-suggest-list[hidden] { display: none; }
.cm-suggest-list button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--cm-line); background: transparent; color: var(--cm-ink); text-align: left; cursor: pointer; font: inherit; }
.cm-suggest-list button:hover, .cm-suggest-list button:focus-visible { background: var(--cm-marker); color: #000; }
.cm-suggest-list span { font-size: 0.85rem; color: var(--cm-ink-2); }
@media (max-width: 760px) {
	.cm-inbox { grid-template-columns: 1fr; min-height: 0; }
	.cm-inbox__list { border-right: 0; }
	.cm-inbox.is-open .cm-inbox__list { display: none; }
	.cm-inbox:not(.is-open) .cm-inbox__pane { display: none; }
	.cm-inbox__back { display: inline-block; }
	.cm-inbox__threads { max-height: none; }
	.cm-inbox .cm-chat { max-height: 58vh; }
}

/* Obavijesti: točkica za nepročitano */
.cm-note { display: flex; gap: 10px; align-items: baseline; }
.cm-note__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cm-hot); box-shadow: 0 0 0 2px var(--cm-ink); transform: translateY(-1px); }
.cm-note__dot--read { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cm-line); }
.cm-unread .cm-note__txt { font-weight: 700; }

/* Ljestvica: naslovnica, player i glas */
.cm-chart-cover { display: block; width: 56px; height: 56px; flex: none; border: 2px solid var(--cm-ink); overflow: hidden; }
.cm-chart-cover img, .cm-chart-cover .cm-ph { width: 100%; height: 100%; object-fit: cover; font-size: 0.6rem; }
.cm-chart-list .cm-chart-item { grid-template-columns: auto 56px 1fr auto; }
.cm-chart-list:not(.cm-chart-list--results) .cm-chart-item { grid-template-columns: 56px 1fr auto; }
.cm-chart-item .cm-chart-play { grid-column: 1 / -1; }
.cm-chart-item .cm-chart-play:empty { display: none; }
@media (min-width: 720px) {
	.cm-chart-list:not(.cm-chart-list--results) .cm-chart-item { grid-template-columns: 56px minmax(0, 1fr) minmax(200px, 300px) auto; }
	.cm-chart-item .cm-chart-play { grid-column: auto; }
}
.cm-mini-chart li { grid-template-columns: 3em 1fr auto; align-items: center; }
.cm-mini-chart__txt { display: flex; flex-direction: column; min-width: 0; }
.cm-mini-chart__play .cm-player { padding: 0; border: 0; background: transparent; grid-template-columns: auto; }
.cm-mini-chart__play .cm-player__body, .cm-mini-chart__play .cm-player__time { display: none; }
.cm-mini-chart__play .cm-play { width: 36px; height: 36px; }

/* Ulaz (QR) */
.cm-door-cta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cm-door-bar { height: 6px; background: var(--cm-paper-2); margin: 14px auto 0; max-width: 320px; }
.cm-door-bar span { display: block; height: 100%; background: var(--cm-hot); transition: width 1s linear; }

/* Shop: odmah ispod zaglavlja profila */
.cm-shop .cm-section-head { border-bottom-color: var(--cm-hot); }
.cm-shop__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: 14px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.cm-shop__strip > * { scroll-snap-align: start; }
.cm-product { gap: 6px; }
.cm-product__img { display: block; margin: -14px -14px 8px; aspect-ratio: 1; border-bottom: 2px solid var(--cm-ink); overflow: hidden; background: #fff; }
.cm-product__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
div.cm-product__img { display: grid; }
.cm-product__price { font-family: var(--cm-font-display); font-stretch: 85%; font-size: 1.4rem; }
.cm-product .cm-btn { margin-top: auto; align-self: flex-start; }

/* Traži se bend */
.cm-slot-card { border-style: dashed; }
.cm-slot-card .cm-ev-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cm-slot-act { margin-top: 4px; }
.cm-slot-act > summary { display: inline-flex; list-style: none; text-decoration: none !important; }
.cm-slot-act > summary::-webkit-details-marker { display: none; }
.cm-slot-new { margin: 8px 0; padding: 10px 12px; border: 2px dashed var(--cm-hot); }
.cm-slot-req { padding: 8px 0; border-top: 1px solid var(--cm-line); }
.cm-slot-one { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }

/* Emisije */
.cm-episode-head { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; margin-bottom: 18px; }
.cm-episode-head > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (max-width: 560px) { .cm-episode-head { grid-template-columns: 1fr; } .cm-episode-head .cm-release__cover { max-width: 240px; } }

/* Promo inbox */
.cm-inbox-item { gap: 12px; }
.cm-inbox-item .cm-release__cover { width: 120px; flex: none; box-shadow: 4px 4px 0 var(--cm-ink); }

/* Oglasi: zakup */
.cm-ad-total { margin: 0; padding: 10px 14px; border: 2px solid var(--cm-ink); background: var(--cm-marker); color: #000; font-size: 1.05rem; }
.cm-ad-total strong { font-family: var(--cm-font-display); font-stretch: 85%; font-size: 1.5rem; }
.cm-ad-offer { margin-bottom: 18px; box-shadow: 6px 6px 0 var(--cm-hot); }

/* Partneri: traka koja se polako vrti iznad podnožja */
.cm-partners { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-top: 2px solid var(--cm-ink); background: var(--cm-paper); overflow: hidden; }
.cm-partners__label { flex: none; margin: 0; font-family: var(--cm-font-stamp); font-size: 0.85rem; color: var(--cm-ink-2); }
.cm-partners__track { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cm-partners__track ul { display: flex; flex: none; gap: 36px; margin: 0; padding: 0 18px; list-style: none; animation: cm-marquee 40s linear infinite; }
.cm-partners__track:hover ul { animation-play-state: paused; }
.cm-partners li { display: flex; align-items: center; }
.cm-partners img { height: 36px; width: auto; filter: grayscale(1); opacity: 0.8; transition: filter 0.2s, opacity 0.2s; }
.cm-partners a:hover img { filter: none; opacity: 1; }
.cm-partners span { font-family: var(--cm-font-display); font-weight: 800; font-stretch: 80%; font-size: 1.2rem; white-space: nowrap; }
@keyframes cm-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
	.cm-partners__track ul { animation: none; }
	.cm-partners__track ul[aria-hidden] { display: none; }
	.cm-partners__track { overflow-x: auto; }
}
@media (max-width: 560px) { .cm-partners { flex-direction: column; align-items: flex-start; gap: 6px; } .cm-partners__track { width: 100%; } }

/* Sponzorstva */
.cm-sponsor-package p strong { font-weight: 700; }
.cm-chart-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-chart-txt strong { font-family: var(--cm-font-display); font-stretch: 85%; font-size: 1.25rem; line-height: 1.05; }
.cm-chart-txt strong a { color: var(--cm-ink) !important; text-decoration: none; }
.cm-chart-txt .cm-chart-meta { font-size: 0.82rem; }
.cm-chart-item .cm-chart-play .cm-player { max-width: 420px; }

/* Žuti tekst na crnom: kod prelaska mišem signir ide ispod pa tekst mora postati crn */
body.cm-app .cm-switcher a:hover, body.cm-app .cm-switcher a:focus-visible,
body.cm-app .cm-switch-bar a:hover, body.cm-app .cm-switch-bar a:focus-visible,
body.cm-app .cm-msg.is-mine a:hover,

body.cm-app .cm-chip.is-active:hover, body.cm-app .cm-chip[aria-current="true"]:hover,
body.cm-app .cm-tab.is-active:hover,
body.cm-app .cm-shell-footer h4 a:hover,
body.cm-app .cm-notice--warn a:hover,
body.cm-app .cm-ad-total a:hover { background: var(--cm-marker); color: #000 !important; }
body.cm-app .cm-btn--primary:hover { background: var(--cm-ink); }
body.cm-app .cm-badge a:hover, body.cm-app a.cm-badge:hover { background: var(--cm-marker); color: #000 !important; }
/* Kartica ima vezu preko cijele površine; player i gumbi moraju ostati klikabilni */
.cm-card .cm-player, .cm-card .cm-play { position: relative; z-index: 2; }
.cm-listen-ext { font-family: var(--cm-font-stamp); font-size: 0.86rem; }
/* Oglasi jedan ispod drugog (bočni stupac) */
.cm-ad-stack { display: flex; flex-direction: column; gap: 14px; margin: 22px 0; }
.cm-ad-stack .cm-ad { margin: 0 auto; width: 100%; }
.cm-ad-book select { text-overflow: ellipsis; }

/* Ekran za ulaz: ime platforme, logo domaćina, QR, sponzori */
.cm-door { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 980px; margin: 0 auto; padding: 8px 0 24px; }
.cm-door h2 { margin: 4px 0 0; font-size: clamp(2rem, 6vw, 3.6rem); line-height: 0.95; }
.cm-door__brand { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cm-door__platform { display: inline-block; padding: 4px 12px 6px; background: var(--cm-ink); color: var(--cm-hi); font-family: var(--cm-font-display); font-weight: 800; font-stretch: 80%; font-size: 1.6rem; transform: rotate(-2deg); }
.cm-door__x { font-family: var(--cm-font-stamp); font-size: 1.4rem; }
.cm-door__host img { max-height: 64px; width: auto; display: block; }
.cm-door__host-name { font-family: var(--cm-font-display); font-weight: 800; font-size: 1.5rem; }
.cm-door__lineup { margin: 0; font-family: var(--cm-font-stamp); font-size: 1.1rem; }
.cm-door__main { display: grid; grid-template-columns: auto minmax(0, 340px); gap: 28px; align-items: center; text-align: left; }
.cm-door__how p { margin: 0 0 8px; }
.cm-door .cm-door-lead { font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.cm-door-qr svg { display: block; width: min(64vw, 360px); height: auto; }
.cm-door-timer { height: 6px; background: var(--cm-paper-2); margin: 10px 0; }
.cm-door-timer span { display: block; height: 100%; width: 100%; background: var(--cm-hot); }
.cm-door__sponsors { width: 100%; margin-top: 8px; padding-top: 12px; border-top: 2px dashed var(--cm-ink); }
.cm-door__sponsors-label { margin: 0 0 6px; font-family: var(--cm-font-stamp); font-size: 0.9rem; color: var(--cm-ink-2); }
.cm-door__sponsors .cm-ad-stack { margin: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.cm-door__sponsors .cm-ad { margin: 0; flex: 1 1 280px; }
.cm-door__note { max-width: 60ch; }
@media (max-width: 720px) { .cm-door__main { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.cm-door-tablet { margin-bottom: 20px; box-shadow: 6px 6px 0 var(--cm-marker); }
/* Tablet na ulazu: cijeli ekran, bez izbornika i podnožja */
body:has(.cm-door--kiosk) .cm-shell-header, body:has(.cm-door--kiosk) .cm-tabbar, body:has(.cm-door--kiosk) .cm-shell-footer, body:has(.cm-door--kiosk) .cm-partners, body:has(.cm-door--kiosk) .cm-ann-bar, body:has(.cm-door--kiosk) .cm-ann-popup, body:has(.cm-door--kiosk) .cm-page-title, body:has(.cm-door--kiosk) .cm-skip { display: none !important; }
body:has(.cm-door--kiosk) .cm-main { padding-top: 16px; padding-bottom: 16px; }
.cm-door--kiosk { min-height: calc(100vh - 32px); justify-content: center; }
body:has(.cm-door--kiosk), body:has(.cm-door--kiosk) .cm-main { background: var(--cm-paper); }

/* Ekran za ulaz: zaključan cijeli zaslon */
.cm-door__lockbar { position: fixed; top: 10px; right: 10px; z-index: 1000; display: flex; gap: 8px; }
.cm-door__fs { background: var(--cm-surface); }
.cm-door__exit { position: relative; width: 44px; height: 44px; padding: 0; border: 2px solid var(--cm-line); border-radius: 50%; background: transparent; color: var(--cm-ink-2); cursor: pointer; opacity: 0.35; touch-action: none; }
.cm-door__exit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cm-door__exit::before { content: "×"; font-size: 1.4rem; line-height: 40px; }
.cm-door__exit.is-holding { opacity: 1; border-color: var(--cm-hot); background: conic-gradient(var(--cm-hot) 0, transparent 0); animation: cm-hold 2s linear forwards; }
@keyframes cm-hold { from { box-shadow: inset 0 0 0 0 var(--cm-hot); } to { box-shadow: inset 0 0 0 22px var(--cm-hot); } }
body.cm-door-locked { overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.cm-door-locked .cm-shell-header, body.cm-door-locked .cm-tabbar, body.cm-door-locked .cm-shell-footer, body.cm-door-locked .cm-partners, body.cm-door-locked .cm-ann-bar, body.cm-door-locked .cm-ad-wrap, body.cm-door-locked .cm-skip, body.cm-door-locked #wpadminbar { display: none !important; }
body.cm-door-locked .cm-main { padding: 12px 16px; min-height: 100vh; display: flex; align-items: center; }
body.cm-door-locked .cm-door { min-height: calc(100vh - 24px); justify-content: center; width: 100%; }
body.cm-door-locked .cm-door a { pointer-events: none; }
.cm-door-count { min-height: 1.4em; margin: 6px 0 0; font-family: var(--cm-font-stamp); font-size: 1.1rem; color: var(--cm-ok); opacity: 0; }
.cm-door-count.is-pop { animation: cm-pop 2.4s ease-out; }
@keyframes cm-pop { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cm-door-count.is-pop { animation: none; opacity: 1; } }

/* Pravne stranice */
.cm-legal { max-width: 78ch; }
.cm-legal__nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 24px; padding-bottom: 10px; border-bottom: 2px solid var(--cm-ink); font-family: var(--cm-font-stamp); font-size: 0.92rem; }
.cm-legal h3 { margin: 26px 0 8px; font-size: 1.35rem; }
.cm-legal p, .cm-legal li { line-height: 1.6; }
.cm-legal .cm-table td { vertical-align: top; font-size: 0.92rem; }
.cm-legal__date { margin-top: 30px; }
.cm-badge--act { background: var(--cm-lilac); color: #000; }
.cm-daysheet { margin: 16px 0; padding: 14px; border: 2px solid var(--cm-ink); background: var(--cm-surface); }
.cm-daysheet h4 { margin-top: 0; }
.cm-daysheet h5 { margin: 16px 0 6px; font-family: var(--cm-font-display); font-size: 1.1rem; }
.cm-daysheet__req { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--cm-line); }
.cm-daysheet__req--approved .cm-badge { background: var(--cm-ok); color: #fff; }
.cm-daysheet__req--declined span:first-child { text-decoration: line-through; color: var(--cm-ink-2); }
.cm-tablet-box { margin-bottom: 20px; }
.cm-door__partner { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 12px; font-family: var(--cm-font-stamp); font-size: 0.9rem; color: var(--cm-ink-2); }
.cm-door__partner img { max-height: 56px; width: auto; }
.cm-door__partner strong { font-family: var(--cm-font-display); font-size: 1.5rem; color: var(--cm-ink); }
.cm-door__lockbar [hidden] { display: none !important; }

/* Gumb "na vrh" iz teme (Neve i slične) prelazi preko podnožja i donjeg izbornika: platforma ga ne koristi. */
#scroll-to-top, .scroll-to-top, .nv-scroll-to-top, .neve-scroll-to-top, #nv-scroll-to-top, .back-to-top, #back-to-top, .scroll-top, #scroll-top, .go-to-top, #toTop { display: none !important; }

/* Redovi koji se dodaju, miču i pomiču (pjesme, postava, pitanja, ZAMP). */
.cm-row-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cm-row-tools .cm-btn--icon { min-width: 40px; justify-content: center; font-size: 1.05rem; line-height: 1; }
.cm-row-tools .cm-btn:disabled { opacity: .35; cursor: default; }
.cm-row-tools [data-cm-remove-row] { margin-left: auto; }
.cm-rows { display: flex; flex-direction: column; gap: 10px; }

/* Idemo zajedno: zajednički prijevoz. */
.cm-rides { display: grid; gap: 12px; margin: 10px 0 14px; }
.cm-ride { display: flex; flex-direction: column; gap: 8px; }
.cm-ride p { margin: 0; }
.cm-ride--off { opacity: .8; }
.cm-ride__people { margin: 0; }
.cm-ride__people li { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px dashed var(--cm-line, currentColor); }
.cm-ride__people li:last-child { border-bottom: 0; }
.cm-ride__people q { font-style: italic; }
.cm-ride__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.cm-ride__tools > details { flex: 1 1 100%; }
.cm-ride__tools > details:not([open]) { flex: 0 0 auto; }
.cm-ride details > summary.cm-btn, .cm-ride details > summary.cm-btn.cm-btn--small { list-style: none; display: inline-flex; cursor: pointer; padding: 5px 12px; min-height: 34px; width: auto; text-decoration: none; }
.cm-ride details > summary.cm-btn::-webkit-details-marker { display: none; }
.cm-ride details[open] > summary.cm-btn { margin-bottom: 8px; }
.cm-ride__msgs { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.cm-ride__msgs li { padding: 8px 10px; border: 2px solid var(--cm-ink); background: var(--cm-surface); max-width: 90%; }
.cm-ride__msgs li.is-mine { align-self: flex-end; background: var(--cm-marker); color: #111; }
.cm-ride__msgs li.is-mine .cm-muted { color: #333; }
.cm-ride__who { display: block; }

/* Naslovnica na računalu: koncerti u dva puna reda umjesto odrezanog niza; trake izdanja i profila u 3 stupca. */
@media (min-width: 960px) {
	.cm-hub-tonight.cm-rail {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow: visible;
		scroll-snap-type: none;
		padding: 6px 0 4px;
	}
	.cm-hub-strip.cm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) and (max-width: 1179px) {
	.cm-hub-tonight.cm-rail > :nth-child(n+7) { display: none; }
}
@media (min-width: 1180px) {
	.cm-hub-tonight.cm-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cm-hub-tonight .cm-event-card { min-width: 0; }
.cm-hub-tonight .cm-event-card h3, .cm-hub-tonight .cm-event-card .cm-ev-lineup { overflow-wrap: anywhere; }

/* Više oglasa na istoj poziciji: jednako široki, poravnati; na širem prostoru dva ili više u redu. */
.cm-ad-stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cm-ad-w, 300px)), 1fr)); justify-items: center; align-items: start; }
.cm-ad-stack > .cm-ad { max-width: var(--cm-ad-w, 300px); }
.cm-hub-cols .cm-ad-stack { grid-template-columns: 1fr; }
@media (min-width: 600px) and (max-width: 959px) { .cm-hub-cols .cm-ad-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }