:root {
	color-scheme: dark;
	--bg: #0c0e13;
	--panel: #141821;
	--panel-2: #1a1f2a;
	--panel-3: #222836;
	--border: #262d3b;
	--text: #e7eaf0;
	--muted: #8b93a7;
	--accent: #f5b83d;
	--accent-2: #f08c2e;
	--accent-ink: #1b1305;
	--danger: #ef5350;
	--ok: #4caf7a;
	--radius: 12px;
	--topbar: 64px;
	--shadow: 0 18px 50px rgba(0, 0, 0, .45);
	--display: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; /* a mesma do body */

	/* Cores dos times, medidas na tela de loadout do CS2 */
	--ct-bg: #396798;
	--ct-bg-2: #285d92;
	--ct-card: #3c5d8a;
	--ct-card-2: #22517e;
	--ct-ink: #a9cdef;
	--ct-accent: #7fb2e5;
	--t-bg: #7d6526;
	--t-bg-2: #806c3c;
	--t-card: #745e2b;
	--t-card-2: #6a510e;
	--t-ink: #ecd23a;
	--t-accent: #e3c33a;
	--stock-bar: #eef2f4;

	/* Faixas de desgaste do CS2 (largura proporcional ao intervalo de float) */
	--fn: #3fbf7f;
	--mw: #8bc34a;
	--ft: #e6c13d;
	--ww: #ec8a3a;
	--bs: #e5534b;
}

/* Seletor de time no topo: o destaque do site inteiro (abas, slots, bordas) assume a cor do time */
:root[data-team="ct"] { --accent: var(--ct-accent); --accent-2: #4f86c6; --accent-ink: #06121f; }
:root[data-team="t"] { --accent: var(--t-accent); --accent-2: #c9a227; --accent-ink: #1c1602; }

* { box-sizing: border-box; }

/* `hidden` precisa vencer os display: flex/grid dos componentes */
[hidden] { display: none !important; }

html { scroll-padding-top: calc(var(--topbar) + 16px); }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background:
		radial-gradient(1200px 500px at 70% -200px, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
		var(--bg);
	color: var(--text);
	font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; }

button, input, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.muted { color: var(--muted); }

.eyebrow {
	margin: 0 0 2px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ---------- botões ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 38px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: linear-gradient(180deg, var(--accent), var(--accent-2));
	color: var(--accent-ink);
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: filter .15s, transform .15s, background .15s;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.ghost {
	background: var(--panel-2);
	border-color: var(--border);
	color: var(--text);
	font-weight: 600;
}
.btn.ghost:hover { background: var(--panel-3); }
.btn.danger { background: transparent; border-color: rgba(239, 83, 80, .45); color: #ff8a87; font-weight: 600; }
.btn.danger:hover { background: rgba(239, 83, 80, .12); }
.btn.steam { background: linear-gradient(180deg, #2a475e, #1b2838); color: #fff; border-color: #3b6a8c; }
.btn svg { width: 18px; height: 18px; fill: currentColor; }

.icon-btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--panel-2);
	cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; fill: var(--text); }

/* ---------- topo ---------- */

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 20px;
	height: var(--topbar);
	padding: 0 20px;
	background: rgba(12, 14, 19, .86);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	font-size: 18px;
	letter-spacing: .01em;
}
.brand:hover { text-decoration: none; }
.brand strong { color: var(--accent); }

.search {
	position: relative;
	flex: 1;
	max-width: 520px;
	display: flex;
	align-items: center;
}
.search svg { position: absolute; left: 12px; width: 18px; height: 18px; fill: var(--muted); }
.search input {
	width: 100%;
	height: 40px;
	padding: 0 40px 0 40px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--panel);
	outline: none;
}
.search input:focus { border-color: var(--accent); }
.search kbd {
	position: absolute;
	right: 10px;
	padding: 1px 7px;
	border: 1px solid var(--border);
	border-radius: 6px;
	color: var(--muted);
	font: 12px ui-monospace, monospace;
}

.top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.top-actions .btn.active { border-color: var(--accent); color: var(--accent); }

.account { display: flex; align-items: center; gap: 10px; }
.account .who { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.account .who small { color: var(--muted); }

/* ---------- layout ---------- */

.layout {
	flex: 1;
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
}

.sidebar {
	position: sticky;
	top: var(--topbar);
	height: calc(100vh - var(--topbar));
	overflow-y: auto;
	padding: 18px 12px 40px;
	border-right: 1px solid var(--border);
	scrollbar-width: thin;
}

.side-group + .side-group { margin-top: 18px; }
.side-group h3 { margin: 0 0 4px; }
.side-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 6px 8px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--muted);
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}
.side-toggle:hover { background: var(--panel); color: var(--text); }
.side-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.side-count { margin-left: auto; font: 11px ui-monospace, monospace; letter-spacing: 0; }
.side-chevron { width: 16px; height: 16px; fill: currentColor; transition: transform .15s; }
.side-group.collapsed .side-chevron { transform: rotate(-90deg); }
.side-group.collapsed .side-item { display: none; }
.side-group.collapsed + .side-group { margin-top: 4px; }

.side-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 10px;
	color: var(--text);
	border: 1px solid transparent;
}
.side-item:hover { background: var(--panel); text-decoration: none; }
.side-item.active { background: var(--panel-2); border-color: var(--border); }
.side-item.active .side-name { color: var(--accent); }
.side-item img { width: 56px; height: 38px; object-fit: contain; }
.side-name { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-sub {
	display: block;
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.side-sub.equipped { color: var(--rarity, var(--muted)); }
.side-star { color: var(--accent); font-size: 11px; margin-left: 4px; }

.content { padding: 22px 24px 40px; min-width: 0; }

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px 24px;
	margin-bottom: 18px;
}
.view-title h1 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.view-title h1 small { color: var(--muted); font-size: 15px; font-weight: 500; margin-left: 8px; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filters select {
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: var(--panel);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0 11px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--panel);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.chip::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rarity);
}
.chip[aria-pressed="true"] {
	color: var(--text);
	border-color: var(--rarity);
	background: color-mix(in srgb, var(--rarity) 16%, var(--panel));
}
.chip span { opacity: .7; font-weight: 500; }

.banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-bottom: 18px;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), var(--panel);
}
.banner img { width: 72px; height: 48px; object-fit: contain; }
.banner .grow { flex: 1; min-width: 200px; }
.banner strong { display: block; }

/* ---------- grade de skins ---------- */

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
	gap: 14px;
}

.card {
	--rarity: #6b7280;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: linear-gradient(180deg, var(--panel-2), var(--panel));
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	transition: transform .15s, border-color .15s, box-shadow .15s;
}
.card::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--rarity);
}
.card:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--rarity) 60%, var(--border));
	box-shadow: 0 12px 30px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--rarity) 25%, transparent);
}
.card.equipped { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }

.card-art {
	display: grid;
	place-items: center;
	height: 124px;
	margin: 0 -6px 6px;
	border-radius: 10px;
	background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--rarity) 30%, transparent), transparent 66%);
}
.card-art img {
	max-height: 112px;
	object-fit: contain;
	filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45));
	transition: transform .2s;
}
.card:hover .card-art img { transform: scale(1.04) rotate(-1deg); }

.card-weapon { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.card-name small { display: block; color: var(--accent); font-size: 12px; font-weight: 600; }
.card-meta {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
	font-size: 12px;
}
.card-meta .rarity-name { color: var(--rarity); font-weight: 600; }
.card-meta .range { color: var(--muted); font-variant-numeric: tabular-nums; }

.badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .02em;
}
.card-stats {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	color: var(--muted);
	font: 11px ui-monospace, monospace;
	text-align: right;
}

.empty {
	padding: 60px 20px;
	text-align: center;
	color: var(--muted);
}
.empty .btn { margin-top: 14px; }

/* ---------- barra de desgaste ---------- */

.wearbar {
	--min: 0;
	--max: 1;
	--value: 0;
	position: relative;
	display: flex;
	height: 5px;
	border-radius: 3px;
	overflow: hidden;
}
.wearbar > i { display: block; height: 100%; }
.wearbar > i:nth-child(1) { width: 7%; background: var(--fn); }
.wearbar > i:nth-child(2) { width: 8%; background: var(--mw); }
.wearbar > i:nth-child(3) { width: 23%; background: var(--ft); }
.wearbar > i:nth-child(4) { width: 7%; background: var(--ww); }
.wearbar > i:nth-child(5) { width: 55%; background: var(--bs); }
/* escurece o que está fora da faixa possível da skin */
.wearbar::before,
.wearbar::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	background: rgba(12, 14, 19, .78);
}
.wearbar::before { left: 0; width: calc(var(--min) * 100%); }
.wearbar::after { right: 0; width: calc((1 - var(--max)) * 100%); }

/* No painel a barra é ampliada: segmentos com largura/cor inline e sem máscara (já é só a faixa da skin) */
.wearbar.large { height: 12px; border-radius: 6px; overflow: visible; margin: 10px 0 4px; }
.wearbar.large::before,
.wearbar.large::after { display: none; }
.wearbar.large > i:first-of-type { border-radius: 6px 0 0 6px; }
.wearbar.large > i:last-of-type { border-radius: 0 6px 6px 0; }
.wearbar.large > i:only-of-type { border-radius: 6px; }

.scale {
	display: flex;
	justify-content: space-between;
	color: var(--muted);
	font: 11px ui-monospace, monospace;
}
.wearbar .marker {
	position: absolute;
	top: -5px;
	left: calc(var(--value) * 100%);
	z-index: 1;
	width: 4px;
	height: 22px;
	margin-left: -2px;
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 0 0 2px var(--bg), 0 2px 8px rgba(0, 0, 0, .6);
}

/* ---------- detalhe ---------- */

.detail {
	--rarity: #6b7280;
	width: min(980px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--panel);
	color: var(--text);
	box-shadow: var(--shadow);
	overflow: auto;
}
.detail::backdrop { background: rgba(5, 6, 9, .72); backdrop-filter: blur(4px); }
.detail[open] { animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } }

.detail .close { position: absolute; top: 14px; right: 14px; z-index: 2; }

.detail-grid { display: grid; grid-template-columns: 1.1fr 1fr; }

.detail-preview {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 420px;
	padding: 40px 28px;
	background:
		radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rarity) 38%, transparent), transparent 62%),
		linear-gradient(180deg, var(--panel-2), var(--bg));
	border-right: 1px solid var(--border);
}
.detail-preview img { max-height: 300px; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); }
.rarity-tag {
	position: absolute;
	left: 18px;
	bottom: 18px;
	padding: 4px 10px;
	border: 1px solid color-mix(in srgb, var(--rarity) 55%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--rarity) 18%, var(--bg));
	color: var(--rarity);
	font-size: 12px;
	font-weight: 700;
}

.detail-info { display: flex; flex-direction: column; gap: 4px; padding: 26px 26px 22px; }
.detail-info h2 { margin: 0; padding-right: 40px; font-size: 26px; line-height: 1.2; }
.detail-info h2 small { display: block; color: var(--accent); font-size: 15px; font-weight: 600; }
.detail-info > .muted { margin: 2px 0 6px; }

.field {
	margin-top: 12px;
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--panel-2);
}
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 600; }
.field-head strong { color: var(--cond, var(--text)); }
.field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.field input[type="number"] {
	width: 120px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: var(--bg);
	font-variant-numeric: tabular-nums;
}
.field input[type="range"] { width: 100%; margin: 8px 0 0; accent-color: var(--accent); }

.cond-buttons { display: flex; gap: 4px; }
.cond {
	height: 32px;
	min-width: 40px;
	padding: 0 8px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg);
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.cond:hover:not(:disabled) { color: var(--text); border-color: var(--c); }
.cond[aria-pressed="true"] { color: var(--bg); background: var(--c); border-color: var(--c); }
.cond:disabled { opacity: .3; cursor: not-allowed; }

.hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

.check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--accent) 6%, transparent);
	cursor: pointer;
}
.check input { margin-top: 3px; accent-color: var(--accent); }

.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.detail-actions .btn { height: 44px; }
.detail-actions .btn:first-child { flex: 1; }

.btn.small { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }

/* ---------- StatTrak ---------- */

.stattrak-tag {
	position: absolute;
	left: 18px;
	top: 18px;
	padding: 3px 9px;
	border-radius: 6px;
	background: #cf6a32;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
}
.check.stattrak { border-color: rgba(207, 106, 50, .45); background: rgba(207, 106, 50, .07); }
.check.stattrak input { accent-color: #cf6a32; }
.check.stattrak strong { display: block; color: #f08a4b; }
.check.stattrak .muted { font-size: 12px; }
.check:has(input:disabled) { opacity: .5; cursor: not-allowed; }

.card .st {
	position: absolute;
	top: 34px;
	left: 10px;
	z-index: 1;
	padding: 1px 6px;
	border-radius: 5px;
	background: #cf6a32;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
}
.card-stickers { display: flex; gap: 2px; height: 22px; margin-top: 2px; }
.card-stickers img { width: 22px; height: 22px; object-fit: contain; }

/* ---------- abas do painel ---------- */

.tabs {
	display: flex;
	gap: 4px;
	margin-top: 12px;
	padding: 4px;
	border: 1px solid var(--border);
	border-radius: 11px;
	background: var(--bg);
}
.tab {
	flex: 1;
	height: 34px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	font-weight: 700;
	cursor: pointer;
}
.tab:hover:not(:disabled) { color: var(--text); }
.tab[aria-selected="true"] { background: var(--panel-3); color: var(--text); }
.tab:disabled { opacity: .45; cursor: not-allowed; }
.tab .count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 18px;
	margin-left: 4px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 11px;
}
.tab .count:empty { display: none; }

/* ---------- stickers ---------- */

.preview-stickers {
	position: absolute;
	right: 16px;
	bottom: 14px;
	display: flex;
	gap: 4px;
}
.preview-stickers img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
}

.sticker-slots {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin-top: 12px;
}
.slot {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 4px;
	border: 1px dashed var(--border);
	border-radius: 10px;
	background: var(--panel-2);
	color: var(--muted);
	cursor: pointer;
}
.slot.filled { border-style: solid; }
.slot.keychain { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.slot[aria-pressed="true"] { border: 1px solid var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.slot img { width: 100%; height: 100%; object-fit: contain; }
.slot .plus { font-size: 22px; line-height: 1; }
.slot .label {
	position: absolute;
	left: 4px;
	top: 2px;
	font: 10px ui-monospace, monospace;
	color: var(--muted);
}

.slot-editor { margin-top: 10px; }
.slot-editor .field-head span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-tools { display: flex; gap: 6px; flex: none; }

.sticker-wear {
	display: grid;
	grid-template-columns: auto 1fr 44px;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--muted);
}
.sticker-wear input { accent-color: var(--accent); }
.sticker-wear output { text-align: right; font: 12px ui-monospace, monospace; color: var(--text); }

.picker-search { max-width: none; margin-top: 10px; }
.picker-search input { height: 36px; }

.picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 6px;
	max-height: 260px;
	margin-top: 10px;
	overflow-y: auto;
	scrollbar-width: thin;
}
.pick {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 6px 4px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: var(--bg);
	color: var(--text);
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}
.pick:hover { border-color: var(--accent); }
.pick[aria-selected="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pick img { width: 56px; height: 56px; object-fit: contain; }
.pick span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.picker-note { grid-column: 1 / -1; padding: 10px; color: var(--muted); font-size: 12px; text-align: center; }

/* ---------- avisos ---------- */

.toasts {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
}
.toast {
	max-width: 360px;
	padding: 11px 14px;
	border: 1px solid var(--border);
	border-left: 3px solid var(--ok);
	border-radius: 10px;
	background: var(--panel-2);
	box-shadow: var(--shadow);
	animation: pop .2s ease-out;
}
.toast.error { border-left-color: var(--danger); }

.footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	padding: 18px 24px;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 12px;
}

/* ---------- telas menores ---------- */

@media (max-width: 1100px) {
	.detail-grid { grid-template-columns: 1fr; }
	.detail-preview { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--border); }
	.detail-preview img { max-height: 200px; }
}

@media (max-width: 860px) {
	:root { --topbar: 112px; }
	.topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar); padding: 10px 16px; gap: 10px 14px; }
	.search { order: 3; flex-basis: 100%; max-width: none; }
	.search kbd { display: none; }
	.account .who { display: none; }

	.layout { grid-template-columns: 1fr; }
	.sidebar {
		position: static;
		height: auto;
		display: flex;
		gap: 6px;
		padding: 10px 16px;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid var(--border);
	}
	.side-group { display: contents; }
	.side-group h3 { display: none; }
	.side-group.collapsed .side-item { display: grid; } /* faixa horizontal: recolher não se aplica */
	.side-item { grid-template-columns: 40px auto; flex: none; padding: 4px 10px 4px 6px; background: var(--panel); }
	.side-item img { width: 40px; height: 28px; }
	.side-sub { display: none; }

	.content { padding: 16px; }
	.grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
	.card-art { height: 96px; }
	.card-art img { max-height: 88px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---------- seletor de time (topo) ---------- */

.team-switch {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--panel);
}
.team-switch button {
	height: 30px;
	padding: 0 12px;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--muted);
	font: 700 12px/1 var(--display);
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}
.team-switch button:hover { color: var(--text); }
.team-switch button[aria-checked="true"] { background: var(--panel-3); color: var(--text); }
.team-switch button[data-team="2"][aria-checked="true"] { background: linear-gradient(180deg, var(--t-bg-2), var(--t-card-2)); color: var(--t-ink); }
.team-switch button[data-team="3"][aria-checked="true"] { background: linear-gradient(180deg, var(--ct-bg), var(--ct-card-2)); color: #fff; }

.side-diff {
	margin-left: 6px;
	padding: 0 4px;
	border: 1px solid var(--border);
	border-radius: 4px;
	color: var(--muted);
	font: 600 10px/1.4 var(--display);
	letter-spacing: .04em;
}

.save-teams { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.team-chip {
	display: inline-block;
	margin-right: 4px;
	padding: 1px 7px;
	border-radius: 4px;
	font: 700 12px/1.5 var(--display);
	letter-spacing: .06em;
}
.team-chip.t { background: var(--t-card); color: var(--t-ink); }
.team-chip.ct { background: var(--ct-card); color: #fff; }

/* ---------- meu loadout: painéis no estilo da tela de loadout do CS2 ---------- */

.loadout { display: grid; gap: 22px; }

.team-panel {
	--panel-bg: var(--ct-bg);
	--panel-bg-2: var(--ct-bg-2);
	--card: var(--ct-card);
	--card-2: var(--ct-card-2);
	--ink: var(--ct-ink);
	overflow: hidden;
	border-radius: var(--radius);
	background:
		radial-gradient(900px 380px at 80% 120%, rgba(255, 255, 255, .10), transparent 70%),
		linear-gradient(160deg, var(--panel-bg), var(--panel-bg-2));
	box-shadow: var(--shadow);
}
.team-panel.t {
	--panel-bg: var(--t-bg);
	--panel-bg-2: var(--t-bg-2);
	--card: var(--t-card);
	--card-2: var(--t-card-2);
	--ink: var(--t-ink);
}

.team-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: rgba(0, 0, 0, .18);
}
.team-head h2 {
	margin: 0;
	color: var(--ink);
	font: 800 20px/1 var(--display);
	letter-spacing: .03em;
	text-transform: uppercase;
}
.team-emblem {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	color: var(--ink);
	font: 700 14px/1 var(--display);
}
.team-count { margin-left: auto; color: rgba(255, 255, 255, .75); font-size: 13px; }

.team-cols {
	display: grid;
	grid-template-columns: repeat(var(--cols, 5), minmax(150px, 240px));
	gap: 14px;
	padding: 14px 18px 20px;
	overflow-x: auto;
	scrollbar-width: thin;
}
.team-empty { margin: 0; padding: 22px 18px; color: rgba(255, 255, 255, .8); }
.team-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.col-head {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 22px;
	margin: 6px 0 0;
	color: var(--ink);
	font: 800 12px/1 var(--display);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.col-head:empty { display: none; }
.col-head svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

.slot-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px 12px;
	border: 0;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--card), var(--card-2));
	color: #fff;
	text-align: left;
	cursor: pointer;
	/* Barra de raridade embaixo do card, como no jogo (branca = sem skin) */
	box-shadow: inset 0 -3px 0 var(--rarity, var(--stock-bar));
	transition: filter .12s, transform .12s;
}
.slot-card:hover { filter: brightness(1.15); transform: translateY(-1px); }
.slot-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.slot-art { display: grid; place-items: center; height: 76px; }
.slot-art img { max-width: 100%; max-height: 72px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.slot-empty { color: rgba(255, 255, 255, .4); font: 700 28px/1 var(--display); }
.slot-name { font: 700 12px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.slot-sub {
	overflow: hidden;
	color: rgba(255, 255, 255, .72);
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.slot-card.skinned .slot-sub { color: color-mix(in srgb, var(--rarity) 45%, #fff); }
.slot-card .st {
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 1px 5px;
	border-radius: 4px;
	background: #cf6a32;
	font-size: 10px;
	font-weight: 800;
}
.slot-card .card-stickers { position: absolute; top: 6px; left: 6px; height: 18px; }
.slot-card .card-stickers img { width: 18px; height: 18px; }

@media (max-width: 860px) {
	.team-switch button { padding: 0 9px; }
	.team-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
	.team-head h2 { font-size: 17px; }
}