/*
 * TetherChand widgets.
 * Everything is scoped under .tc and driven by custom properties, so themes can restyle
 * with a few variables (e.g. `.tc { --tc-accent: #e11d48; }`) without fighting specificity.
 * Font is inherited from the theme (Iranian themes already ship a Persian font). The optional bundled
 * Vazirmatn (Settings → فونت) is downloaded only when a .tc-font-vazirmatn widget shows Persian text.
 */

/* Vazirmatn v33.0.3, Persian/Arabic glyphs only, one variable file for every weight. SIL OFL 1.1, see ../fonts/vazirmatn/OFL.txt. */
@font-face {
	font-family: "TetherChand Vazirmatn";
	src: url("../fonts/vazirmatn/Vazirmatn-NL-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}

.tc {
	--tc-accent: #4361ee;
	--tc-radius: 16px;
	--tc-bg: #ffffff;
	--tc-surface: #f6f7fb;
	--tc-fg: #0f172a;
	--tc-muted: #64748b;
	--tc-border: rgba(15, 23, 42, 0.08);
	--tc-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
	--tc-pos: #16a34a;
	--tc-pos-bg: rgba(22, 163, 74, 0.1);
	--tc-neg: #dc2626;
	--tc-neg-bg: rgba(220, 38, 38, 0.1);
	--tc-flat: #64748b;
	--tc-flat-bg: rgba(100, 116, 139, 0.1);
	/* Picker dropdown on styles that repaint the box (gradient, minimal). */
	--tc-pop-bg: #ffffff;
	--tc-pop-fg: #0f172a;
	--tc-pop-muted: #64748b;
	--tc-pop-surface: #f6f7fb;
	--tc-pop-border: rgba(15, 23, 42, 0.1);

	box-sizing: border-box;
	direction: rtl;
	color: var(--tc-fg);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Latin letters and digits come from the system UI font. */
.tc.tc-font-vazirmatn {
	font-family: "TetherChand Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.tc *,
.tc *::before,
.tc *::after {
	box-sizing: inherit;
}

/* ------------------------------------------------------------ color schemes */

.tc-scheme-dark {
	--tc-bg: #0f172a;
	--tc-surface: #1e293b;
	--tc-fg: #f1f5f9;
	--tc-muted: #94a3b8;
	--tc-border: rgba(255, 255, 255, 0.08);
	--tc-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
	--tc-pos: #4ade80;
	--tc-pos-bg: rgba(74, 222, 128, 0.12);
	--tc-neg: #f87171;
	--tc-neg-bg: rgba(248, 113, 113, 0.12);
	--tc-flat: #94a3b8;
	--tc-flat-bg: rgba(148, 163, 184, 0.12);
	--tc-pop-bg: #0f172a;
	--tc-pop-fg: #f1f5f9;
	--tc-pop-muted: #94a3b8;
	--tc-pop-surface: #1e293b;
	--tc-pop-border: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
	.tc-scheme-auto {
		--tc-bg: #0f172a;
		--tc-surface: #1e293b;
		--tc-fg: #f1f5f9;
		--tc-muted: #94a3b8;
		--tc-border: rgba(255, 255, 255, 0.08);
		--tc-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
		--tc-pos: #4ade80;
		--tc-pos-bg: rgba(74, 222, 128, 0.12);
		--tc-neg: #f87171;
		--tc-neg-bg: rgba(248, 113, 113, 0.12);
		--tc-flat: #94a3b8;
		--tc-flat-bg: rgba(148, 163, 184, 0.12);
		--tc-pop-bg: #0f172a;
		--tc-pop-fg: #f1f5f9;
		--tc-pop-muted: #94a3b8;
		--tc-pop-surface: #1e293b;
		--tc-pop-border: rgba(255, 255, 255, 0.1);
	}
}

/* ------------------------------------------------------------ styles (box) */

.tc:not(.tc-inline) {
	margin: 0 0 1.5em;
	padding: 18px;
	border-radius: var(--tc-radius);
	background: var(--tc-bg);
	border: 1px solid var(--tc-border);
	box-shadow: var(--tc-shadow);
}

.tc-style-minimal:not(.tc-inline) {
	padding: 4px 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Minimal has no background of its own, so it follows the theme's text color in every scheme. */
.tc.tc-style-minimal {
	--tc-fg: currentColor;
	--tc-muted: color-mix(in srgb, currentColor 60%, transparent);
	--tc-border: color-mix(in srgb, currentColor 12%, transparent);
	--tc-surface: color-mix(in srgb, currentColor 5%, transparent);
	color: inherit;
}

.tc-style-gradient:not(.tc-inline) {
	--tc-fg: #ffffff;
	--tc-muted: rgba(255, 255, 255, 0.75);
	--tc-border: rgba(255, 255, 255, 0.16);
	--tc-surface: rgba(255, 255, 255, 0.12);
	--tc-pos: #bbf7d0;
	--tc-pos-bg: rgba(255, 255, 255, 0.16);
	--tc-neg: #fecaca;
	--tc-neg-bg: rgba(0, 0, 0, 0.16);
	--tc-flat: #ffffff;
	--tc-flat-bg: rgba(255, 255, 255, 0.16);
	border: 0;
	background: var(--tc-accent); /* fallback for browsers without color-mix() */
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
		linear-gradient(135deg, var(--tc-accent) 0%, color-mix(in srgb, var(--tc-accent) 55%, #0b1026) 100%);
	box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--tc-accent) 70%, transparent);
}

.tc-style-glass:not(.tc-inline) {
	background: var(--tc-bg);
	background: color-mix(in srgb, var(--tc-bg) 62%, transparent);
	border-color: color-mix(in srgb, var(--tc-fg) 12%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
}

.tc-style-glass {
	--tc-surface: color-mix(in srgb, var(--tc-fg) 5%, transparent);
}

/* ------------------------------------------------------------ shared atoms */

.tc-title {
	margin: 0 0 12px;
	font-size: 1.05em;
	font-weight: 700;
}

.tc-unit {
	color: var(--tc-muted);
	font-size: 0.8em;
	font-weight: 500;
}

.tc-icon {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--tc-surface);
}

.tc-icon--lg {
	width: 44px;
	height: 44px;
}

.tc-icon--sm {
	width: 20px;
	height: 20px;
}

/* Themes built on a CSS reset (Tailwind preflight, many block themes) make every img/svg a block, which would put
   the table icon above the name. Icons stay inline; flex parents (card, tiles, ticker) are unaffected. */
.tc img.tc-icon,
.tc svg.tc-icon {
	display: inline-block;
}

.tc-icon--svg {
	border-radius: 0;
	background: none;
	overflow: visible;
}

.tc-asset .tc-icon--svg,
.tc-ticker__item .tc-icon--svg {
	vertical-align: middle;
}

.tc-icon--text {
	display: inline-grid;
	place-items: center;
	color: var(--tc-accent);
	font-weight: 700;
	font-size: 0.85em;
}

.tc-val {
	display: inline-block;
	unicode-bidi: isolate;
	border-radius: 6px;
	transition: color 0.3s ease;
}

.tc-pos { color: var(--tc-pos); }
.tc-neg { color: var(--tc-neg); }
.tc-flat { color: var(--tc-flat); }

.tc-badge,
.tc-chip {
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 700;
	white-space: nowrap;
}

.tc-badge.tc-pos, .tc-chip.tc-pos { background: var(--tc-pos-bg); }
.tc-badge.tc-neg, .tc-chip.tc-neg { background: var(--tc-neg-bg); }
.tc-badge.tc-flat, .tc-chip.tc-flat { background: var(--tc-flat-bg); }

.tc-flash-up { animation: tc-flash-up 1.2s ease; }
.tc-flash-down { animation: tc-flash-down 1.2s ease; }

@keyframes tc-flash-up {
	0%, 40% { background: var(--tc-pos-bg); color: var(--tc-pos); }
	100% { background: transparent; }
}

@keyframes tc-flash-down {
	0%, 40% { background: var(--tc-neg-bg); color: var(--tc-neg); }
	100% { background: transparent; }
}

/* ------------------------------------------------------------ footer */

.tc-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	margin-top: 14px;
	color: var(--tc-muted);
	font-size: 0.75em;
}

.tc-foot__time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.tc-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tc-pos);
	box-shadow: 0 0 0 0 var(--tc-pos);
	animation: tc-pulse 2s infinite;
}

@keyframes tc-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc-pos) 60%, transparent); }
	70% { box-shadow: 0 0 0 6px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* ------------------------------------------------------------ brand: logo badge + «By Khanesarmaye» */

/* Extra specificity: themes often underline or colour links inside post content (e.g. `.entry-content a`). */
.tc .tc-foot a.tc-brand,
.tc .tc-foot a.tc-brand:hover,
.tc .tc-foot a.tc-brand:focus,
.tc .tc-by a.tc-by__link,
.tc .tc-by a.tc-by__link:hover,
.tc .tc-by a.tc-by__link:focus {
	text-decoration: none;
	box-shadow: none;
	border-bottom: 0;
}

/* Logo badge: a round logo; the name slides out on hover. */
.tc .tc-foot a.tc-brand {
	flex: none;
	align-items: center;
	height: 28px;
	margin-inline-start: auto;
	padding: 2px;
	border: 1px solid var(--tc-border);
	border-radius: 99px;
	background: var(--tc-surface);
	color: var(--tc-fg);
	line-height: 1;
	white-space: nowrap;
	transition: border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.tc .tc-brand__logo {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border-radius: 50%;
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.tc .tc-brand__name {
	display: inline-block;
	max-width: 0;
	overflow: hidden;
	padding: 0;
	font-size: 11.5px;
	font-weight: 700;
	opacity: 0;
	transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.tc .tc-foot a.tc-brand:hover,
.tc .tc-foot a.tc-brand:focus-visible {
	border-color: color-mix(in srgb, var(--tc-accent) 45%, transparent);
	box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--tc-accent) 70%, transparent);
}

.tc .tc-brand:hover .tc-brand__name,
.tc .tc-brand:focus-visible .tc-brand__name {
	max-width: 90px;
	padding: 0 6px 0 8px;
	opacity: 1;
	transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease 0.1s;
}

.tc .tc-brand:hover .tc-brand__logo,
.tc .tc-brand:focus-visible .tc-brand__logo {
	transform: rotate(-12deg) scale(1.06);
}

.tc .tc-foot a.tc-brand:focus-visible {
	outline: 2px solid var(--tc-accent);
	outline-offset: 2px;
}

/* «By Khanesarmaye»: a quiet caption under the widget, like a signature. */
.tc .tc-by {
	margin: 12px 0 -6px;
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
}

.tc .tc-by a.tc-by__link {
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	color: var(--tc-muted);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0.02em;
	direction: ltr;
	transition: color 0.3s ease;
}

.tc .tc-by__pre {
	font-weight: 400;
	opacity: 0.8;
}

.tc .tc-by__name {
	font-weight: 700;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.tc .tc-by a.tc-by__link:hover,
.tc .tc-by a.tc-by__link:focus-visible {
	color: var(--tc-accent);
}

.tc .tc-by a.tc-by__link:hover .tc-by__name,
.tc .tc-by a.tc-by__link:focus-visible .tc-by__name {
	background-size: 100% 1px;
}

.tc-style-gradient .tc-by a.tc-by__link:hover,
.tc-style-gradient .tc-by a.tc-by__link:focus-visible {
	color: #fff;
}

/* ------------------------------------------------------------ asset names → their page on khanesarmaye.com */

.tc a.tc-link,
.tc a.tc-link:visited {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	border-bottom: 0;
	background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
	transition: color 0.25s ease, background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Names drawn in the muted colour keep it (the rule above beats theme link colours, so it also beats these classes). */
.tc a.tc-tile__name,
.tc a.tc-ticker__name {
	color: var(--tc-muted);
}

.tc a.tc-link:hover,
.tc a.tc-link:focus-visible {
	color: var(--tc-accent);
	text-decoration: none;
	background-size: 100% 1px;
}

.tc-style-gradient a.tc-link:hover,
.tc-style-gradient a.tc-link:focus-visible {
	color: #fff;
}

.tc a.tc-link:focus-visible {
	outline: 2px solid var(--tc-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ------------------------------------------------------------ view: card */

.tc-card {
	max-width: 420px;
}

.tc-card.alignwide,
.tc-card.alignfull {
	max-width: none;
}

.tc-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tc-card__titles {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.tc-card__title {
	margin: 0;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.4;
}

.tc-card__sub {
	color: var(--tc-muted);
	font-size: 0.75em;
}

.tc-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 16px;
}

.tc-card__amount {
	font-size: clamp(1.75em, 6vw, 2.25em);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.tc-card__secondary {
	margin-top: 4px;
	color: var(--tc-muted);
	font-size: 0.85em;
}

.tc-bubble {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-top: 14px;
	padding: 10px 12px;
	border-radius: calc(var(--tc-radius) * 0.65);
	background: var(--tc-surface);
	font-size: 0.85em;
}

.tc-bubble.tc-pos { background: var(--tc-pos-bg); }
.tc-bubble.tc-neg { background: var(--tc-neg-bg); }

.tc-bubble__label {
	color: var(--tc-fg);
	font-weight: 700;
}

.tc-bubble__value .tc-val {
	font-weight: 700;
}

.tc-bubble__tag {
	margin-inline-start: auto;
	font-size: 0.9em;
	font-weight: 600;
}

/* ------------------------------------------------------------ view: picker */

.tc-picker {
	max-width: 420px;
}

.tc-picker.alignwide,
.tc-picker.alignfull {
	max-width: none;
}

.tc-picker__bar {
	position: relative;
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

/* Buttons and inputs: themes style them globally, so reset what matters. */
.tc .tc-picker__toggle,
.tc .tc-picker__save,
.tc .tc-picker__empty,
.tc .tc-picker__search {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	color: var(--tc-fg);
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
}

.tc .tc-picker__toggle,
.tc .tc-picker__save {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border: 1px solid var(--tc-border);
	border-radius: calc(var(--tc-radius) * 0.75);
	background: var(--tc-surface);
	line-height: 1.3;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.tc .tc-picker__toggle {
	flex: 1;
	gap: 10px;
	min-width: 0;
	padding: 0 14px;
	font-weight: 600;
	text-align: right;
}

.tc .tc-picker__save {
	flex: none;
	justify-content: center;
	width: 44px;
	padding: 0;
	color: var(--tc-muted);
}

.tc .tc-picker__save[hidden] {
	display: none;
}

.tc .tc-picker__toggle:hover,
.tc .tc-picker__save:hover,
.tc-picker--open .tc-picker__toggle {
	border-color: color-mix(in srgb, var(--tc-accent) 55%, transparent);
	background: var(--tc-surface);
	color: var(--tc-fg);
}

.tc .tc-picker__save[aria-pressed="true"] {
	color: var(--tc-accent);
	border-color: color-mix(in srgb, var(--tc-accent) 55%, transparent);
}

.tc-style-gradient .tc-picker__save[aria-pressed="true"] {
	color: #fff;
}

.tc-picker__save[aria-pressed="true"] path {
	fill: currentColor;
}

.tc .tc-picker__toggle:focus-visible,
.tc .tc-picker__save:focus-visible,
.tc .tc-picker__empty:focus-visible {
	outline: 2px solid var(--tc-accent);
	outline-offset: 2px;
}

.tc-picker__search-icon {
	flex: none;
	color: var(--tc-muted);
}

.tc-picker__label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tc-picker__chevron {
	flex: none;
	color: var(--tc-muted);
	transition: transform 0.2s ease;
}

.tc-picker--open .tc-picker__chevron {
	transform: rotate(180deg);
}

.tc-picker__panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 60;
	padding: 8px;
	border: 1px solid var(--tc-border);
	border-radius: calc(var(--tc-radius) * 0.75);
	background: var(--tc-bg);
	color: var(--tc-fg);
	box-shadow: 0 18px 48px -12px rgba(15, 23, 42, 0.35);
}

.tc-picker__panel[hidden] {
	display: none;
}

/* Gradient and minimal repaint the box; the dropdown keeps solid scheme colors. */
.tc-style-gradient .tc-picker__panel,
.tc-style-minimal .tc-picker__panel {
	--tc-bg: var(--tc-pop-bg);
	--tc-fg: var(--tc-pop-fg);
	--tc-muted: var(--tc-pop-muted);
	--tc-surface: var(--tc-pop-surface);
	--tc-border: var(--tc-pop-border);
}

.tc .tc-picker__search {
	display: block;
	width: 100%;
	height: 42px;
	margin-bottom: 6px;
	padding: 0 12px;
	border: 1px solid var(--tc-border);
	border-radius: calc(var(--tc-radius) * 0.55);
	background: var(--tc-surface);
	font-size: 0.95em;
	cursor: text;
	outline: none;
}

.tc .tc-picker__search:focus {
	border-color: var(--tc-accent);
}

.tc-picker__search::-webkit-search-cancel-button {
	cursor: pointer;
}

.tc-picker__list {
	position: relative;
	max-height: 300px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.tc-picker__group-title {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 8px 8px 4px;
	background: var(--tc-bg);
	color: var(--tc-muted);
	font-size: 0.75em;
	font-weight: 700;
}

.tc-picker__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: calc(var(--tc-radius) * 0.5);
	cursor: pointer;
	font-size: 0.92em;
}

.tc-picker__opt:hover,
.tc-picker__opt.is-active {
	background: var(--tc-surface);
}

.tc-picker__opt[aria-selected="true"] .tc-picker__opt-name {
	color: var(--tc-accent);
}

.tc-picker__opt-name {
	min-width: 0;
	overflow: hidden;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tc-picker__opt-sym {
	flex: 1;
	color: var(--tc-muted);
	font-size: 0.75em;
	letter-spacing: 0.02em;
}

.tc-picker__opt-price {
	flex: none;
	font-weight: 700;
	font-size: 0.9em;
	unicode-bidi: isolate;
}

.tc-picker__none {
	padding: 18px 8px;
	color: var(--tc-muted);
	text-align: center;
}

/* Nothing picked yet: no «updated» time to show. */
.tc-picker[data-tc-map=""] .tc-foot__time {
	visibility: hidden;
}

/* Same height as a card, so picking (or restoring a saved pick) does not move the page. */
.tc-picker__body {
	min-height: 128px;
}

.tc .tc-picker__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 128px;
	padding: 16px;
	border: 1.5px dashed var(--tc-border);
	border-radius: calc(var(--tc-radius) * 0.75);
	background: transparent;
	color: var(--tc-muted);
	font-size: 0.9em;
	line-height: 1.7;
	text-align: center;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.tc .tc-picker__empty:hover {
	border-color: color-mix(in srgb, var(--tc-accent) 55%, transparent);
	background: transparent;
	color: var(--tc-fg);
}

.tc-picker__empty-icon {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tc-surface);
	color: var(--tc-accent);
}

.tc-style-gradient .tc-picker__empty-icon {
	color: #fff;
}

/* ------------------------------------------------------------ view: table */

.tc-table__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 -4px;
}

.tc .tc-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.92em;
	background: transparent;
}

.tc .tc-table th,
.tc .tc-table td {
	padding: 10px 8px;
	border: 0;
	border-bottom: 1px solid var(--tc-border);
	background: transparent;
	text-align: right;
	vertical-align: middle;
	white-space: nowrap;
}

.tc .tc-table thead th {
	color: var(--tc-muted);
	font-size: 0.8em;
	font-weight: 600;
	background: var(--tc-surface);
	border-bottom: 0;
}

.tc .tc-table thead th:first-child { border-start-start-radius: calc(var(--tc-radius) * 0.6); border-end-start-radius: calc(var(--tc-radius) * 0.6); }
.tc .tc-table thead th:last-child { border-start-end-radius: calc(var(--tc-radius) * 0.6); border-end-end-radius: calc(var(--tc-radius) * 0.6); }
.tc .tc-table tbody tr:last-child > * { border-bottom: 0; }
.tc .tc-table tbody tr:hover > * { background: var(--tc-surface); }

.tc-asset {
	font-weight: 600;
}

.tc-asset .tc-icon {
	margin-inline-end: 8px;
	vertical-align: middle;
}

.tc-asset__sym {
	margin-inline-start: 6px;
	color: var(--tc-muted);
	font-size: 0.75em;
	font-weight: 500;
}

.tc-num {
	font-weight: 600;
}

@media (max-width: 480px) {
	.tc:not(.tc-inline):not(.tc-style-minimal) { padding: 14px; }
	.tc .tc-col-usd,
	.tc .tc-asset__sym { display: none; }
	.tc .tc-table { font-size: 0.85em; }
	.tc .tc-table th,
	.tc .tc-table td { padding: 9px 4px; }
	.tc .tc-table .tc-asset { white-space: normal; }
	.tc-asset .tc-icon { width: 22px; height: 22px; margin-inline-end: 6px; }
	.tc-chip { padding: 2px 7px; }
}

/* ------------------------------------------------------------ view: grid */

.tc .tc-grid__list {
	display: grid;
	/* auto-fit: a few tiles in a wide box stretch to fill it instead of leaving empty columns. */
	grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tc-tile {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 12px;
	border-radius: calc(var(--tc-radius) * 0.75);
	background: var(--tc-surface);
	border: 1px solid var(--tc-border);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.tc-tile:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--tc-accent) 40%, transparent);
}

.tc-style-minimal .tc-tile {
	border-color: var(--tc-border);
}

.tc-tile__head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.tc-tile__name {
	overflow: hidden;
	color: var(--tc-muted);
	font-size: 0.85em;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tc-tile__price {
	font-size: clamp(0.9em, 3.6vw, 1.1em);
	font-weight: 800;
	overflow-wrap: anywhere;
}

.tc-tile .tc-chip {
	align-self: flex-start;
}

/* ------------------------------------------------------------ view: ticker */

/* Beats the small-screen box padding (.tc:not(.tc-inline):not(.tc-style-minimal)). */
.tc.tc-ticker:not(.tc-inline):not(.tc-style-minimal) {
	padding: 0;
}

.tc-ticker__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to left, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to left, transparent, #000 6%, #000 94%, transparent);
}

.tc-ticker__track {
	display: flex;
	width: max-content;
	animation: tc-marquee var(--tc-duration, 40s) linear infinite;
}

.tc-ticker:hover .tc-ticker__track,
.tc-ticker:focus-within .tc-ticker__track {
	animation-play-state: paused;
}

.tc .tc-ticker__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tc-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 12px 18px;
	white-space: nowrap;
	border-inline-start: 1px solid var(--tc-border);
	font-size: 0.9em;
}

.tc-ticker__name {
	color: var(--tc-muted);
	font-weight: 600;
}

.tc-ticker__price {
	font-weight: 800;
}

/* One line: the strip scrolls, the brand cap stays pinned at the end (left in RTL). */
.tc.tc-ticker {
	display: flex;
	align-items: stretch;
}

.tc-ticker__viewport {
	flex: 1 1 auto;
	min-width: 0;
}

/* The cap: only the round logo (its name slides out on hover), so the prices keep the room. */
.tc-ticker .tc-foot {
	flex: none;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0 10px;
	border-inline-start: 1px solid var(--tc-border);
}

.tc.tc-ticker .tc-foot a.tc-brand {
	margin: 0;
}

/* «By Khanesarmaye» scrolls with the prices as the last item of each loop. */
.tc.tc-ticker .tc-ticker__by .tc-by {
	margin: 0;
	padding: 0;
	align-items: center;
	white-space: nowrap;
	font-size: 0.85em;
}

/* Pinned to the top (Elementor «Sticky»): stay below the WordPress admin bar. */
body.admin-bar .tc-ticker {
	--tc-adminbar: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 600px) {
	/* The admin bar scrolls away on phones. */
	body.admin-bar .tc-ticker { --tc-adminbar: 0px; }
}

/* Small screens: a thinner strip, logo only (the name stays for screen readers). */
@media (max-width: 480px) {
	.tc-ticker__item {
		gap: 6px;
		padding: 8px 12px;
		font-size: 0.8em;
	}
	.tc-ticker .tc-icon--sm,
	.tc.tc-ticker .tc-brand__logo {
		width: 18px;
		height: 18px;
	}
	.tc.tc-ticker .tc-foot a.tc-brand { height: 24px; }
	.tc-ticker .tc-foot { padding: 0 8px; }
}

/* RTL: content overflows to the left, so the track moves right to reveal it. */
@keyframes tc-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
	.tc-ticker__track { animation: none; }
	.tc-ticker__viewport { overflow-x: auto; }
	.tc-ticker__list[aria-hidden="true"] { display: none; }
	.tc-dot, .tc-flash-up, .tc-flash-down { animation: none; }
	.tc-tile { transition: none; }
	.tc .tc-brand__name, .tc .tc-brand__logo, .tc a.tc-brand, .tc a.tc-link, .tc .tc-by__name { transition: none; }
	.tc-picker__chevron { transition: none; }
}

/* ------------------------------------------------------------ view: inline */

.tc-inline {
	display: inline;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.tc-inline .tc-val {
	font-weight: 700;
	color: inherit;
}

.tc-inline .tc-val.tc-pos { color: var(--tc-pos); }
.tc-inline .tc-val.tc-neg { color: var(--tc-neg); }

.tc-inline__change {
	font-size: 0.9em;
}

/* ------------------------------------------------------------ empty state */

.tc-empty {
	color: var(--tc-muted);
	font-size: 0.9em;
}

/* ------------------------------------------------------------ Elementor */

/* Elementor spaces widgets itself. */
.elementor-widget > .tc:not(.tc-inline),
.elementor-widget-container > .tc:not(.tc-inline) {
	margin-bottom: 0;
}

.tc-line {
	margin: 0;
}

.tc-editor-hint {
	margin: 6px 0 0;
	color: #b45309;
	font-size: 12px;
}