:root {
	--nb-cotes: 2;
}

.card{
	width: fit-content;
}

#calculators-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2rem;
}

.add-calculator-row {
	display: flex;
	justify-content: flex-start;
	margin: 1rem 0 0;
}

.js-duplicate-calc {
	margin-left: auto;
}

.js-duplicate-calc,
.js-delete-calc {
	font-size: 0.85rem;
}

.js-delete-calc {
	color: var(--color-neg);
}
.js-delete-calc .btn-icon-img {
	width: 1rem;
	height: 1rem;
}
.js-delete-calc:hover {
	background: var(--color-danger-bg);
	border-color: var(--color-danger-border);
}

/* Icône inline dans un bouton : suit la couleur du texte (currentColor). */
.btn-svg {
	width: 1rem;
	height: 1rem;
	vertical-align: middle;
	margin-right: 6px;
	flex-shrink: 0;
}

.sb-error {
	padding: 0.75rem 1rem;
	margin-top: 1rem;
	background: var(--color-danger-bg);
	color: var(--color-danger-text);
	border: 1px solid var(--color-danger-border);
	border-radius: 8px;
	font-weight: 500;
}

.card-actions {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}

/* Grille principale.
   Ordre des colonnes : N°/Total | Type | [Site] | Cotes A..N | Cote totale |
   Mises | Profit | Suppr détail | [Fixe détail] | Fixe | Distribution |
   Profit total | Actions.
   Les colonnes [Site] et [Fixe détail] sont conditionnelles (classes
   .with-detail-sites et .has-multi-details). --site-shift décale les cellules
   qui utilisent un grid-column numérique (issue-avg-cote, issue-sum-profit). */
.sb-grid {
	--site-shift: 0;
	display: grid;
	border-radius: var(--radius);
	overflow: hidden;
	grid-template-columns:
		min-content
		/* N° / Total */
		auto
		/* Type (Back/Lay) */
		repeat(var(--nb-cotes), fit-content(180px))
		/* Cotes A.. */
		auto
		/* Cote totale */
		auto
		/* Mises */
		auto
		/* Profit */
		auto
		/* Suppr détail (sans header) */
		auto
		/* Fixe */
		auto
		/* Distribution */
		auto
		/* Profit total */
		auto;
	/* Actions */
	width: fit-content;
	gap: .5em 1em;
}

/* Quand au moins une issue a 2+ détails, la colonne Fixe détail s'insère
   entre Suppr détail et Fixe. */
.sb-grid.has-multi-details {
	grid-template-columns:
		min-content
		auto
		repeat(var(--nb-cotes), fit-content(180px))
		auto
		auto
		auto /* Profit */
		auto /* Suppr détail */
		auto /* Fixe détail */
		auto
		auto
		auto
		auto;
}

/* Variante Site actif : colonne Site auto insérée entre Type et Cotes. */
.sb-grid.with-detail-sites {
	--site-shift: 1;
	grid-template-columns:
		min-content
		auto /* Type */
		auto /* Site */
		repeat(var(--nb-cotes), fit-content(180px))
		auto
		auto
		auto
		auto
		auto
		auto
		auto
		auto;
}
.sb-grid.has-multi-details.with-detail-sites {
	grid-template-columns:
		min-content
		auto /* Type */
		auto /* Site */
		repeat(var(--nb-cotes), fit-content(180px))
		auto
		auto
		auto
		auto
		auto /* Fixe détail */
		auto
		auto
		auto
		auto;
}

/* Cellules Site / header Site : présentes dans le DOM même quand le toggle
   est off (auto-flow simplifié, pas de sync JS) ; masquées via display:none
   pour ne pas apparaître ET pour être retirées du placement CSS Grid. */
.sb-grid:not(.with-detail-sites) [data-sitehead],
.sb-grid:not(.with-detail-sites) [data-site] {
	display: none;
}
.sb-grid [data-sitehead],
.sb-grid [data-site] {
	justify-content: center;
}
.sb-grid .site-cell {
	/* align-self:center + display:inline-block → la cellule ne stretch pas à
	   la hauteur de la ligne, elle prend uniquement la hauteur de son contenu.
	   Pas de min-width : la piste "auto" de la grille se dimensionne sur la
	   valeur la plus longue de la colonne. */
	align-self: center;
	display: inline-block;
	padding: 4px 6px;
	font-size: 12px;
	color: var(--color-text);
	border: 1px dashed transparent;
	border-radius: 4px;
	text-align: center;
	outline: none;
	cursor: text;
}
.sb-grid .site-cell:hover {
	border-color: var(--color-divider);
}
.sb-grid .site-cell:focus {
	border-color: var(--c-primary);
	border-style: solid;
	box-shadow: 0 0 0 3px rgba(92, 137, 157, 0.15);
}
.sb-grid .site-cell:empty::before {
	content: attr(data-placeholder);
	color: var(--color-muted);
	font-style: italic;
	pointer-events: none;
}

/* Application des couleurs de pill du theme.css quand on détecte un site connu
   dans le texte saisi. data-site-match est posé côté JS (applySiteDetection).
   On calque les mêmes variables --site-*-bg / --site-*-text que .ff-site-pill. */
.sb-grid .site-cell[data-site-match] {
	border-color: transparent;
	font-weight: 700;
}
.sb-grid .site-cell[data-site-match="bet365"]     { background: var(--site-bet365-bg);     color: var(--site-bet365-text); }
.sb-grid .site-cell[data-site-match="betclic"]    { background: var(--site-betclic-bg);    color: var(--site-betclic-text); }
.sb-grid .site-cell[data-site-match="betify"]     { background: var(--site-betify-bg);     color: var(--site-betify-text); }
.sb-grid .site-cell[data-site-match="betsson"]    { background: var(--site-betsson-bg);    color: var(--site-betsson-text); }
.sb-grid .site-cell[data-site-match="bwin"]       { background: var(--site-bwin-bg);       color: var(--site-bwin-text); }
.sb-grid .site-cell[data-site-match="daznbet"]    { background: var(--site-daznbet-bg);    color: var(--site-daznbet-text); }
.sb-grid .site-cell[data-site-match="feelingbet"] { background: var(--site-feelingbet-bg); color: var(--site-feelingbet-text); }
.sb-grid .site-cell[data-site-match="olybet"]     { background: var(--site-olybet-bg);     color: var(--site-olybet-text); }
.sb-grid .site-cell[data-site-match="piwix"]      { background: var(--site-piwix-bg);      color: var(--site-piwix-text); }
.sb-grid .site-cell[data-site-match="pmu"]        { background: var(--site-pmu-bg);        color: var(--site-pmu-text); }
.sb-grid .site-cell[data-site-match="pokerstars"] { background: var(--site-pokerstars-bg); color: var(--site-pokerstars-text); }
.sb-grid .site-cell[data-site-match="unibet"]     { background: var(--site-unibet-bg);     color: var(--site-unibet-text); }
.sb-grid .site-cell[data-site-match="vbet"]       { background: var(--site-vbet-bg);       color: var(--site-vbet-text); }
.sb-grid .site-cell[data-site-match="winamax"]    { background: var(--site-winamax-bg);    color: var(--site-winamax-text); }

/* Intitulé d'issue : pleine largeur au-dessus de chaque issue quand actif. */
.sb-grid .issue-label-cell {
	grid-column: 1 / -1;
	display: none;
	padding: 4px 8px;
	margin-top: .25rem;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
	border: 1px dashed transparent;
	border-radius: 4px;
	outline: none;
	cursor: text;
	min-height: 1.2em;
}
.sb-grid.with-issue-labels .issue-label-cell {
	display: block;
}
.sb-grid.with-issue-labels .issue-label-cell:hover {
	border-color: var(--color-divider);
}
.sb-grid.with-issue-labels .issue-label-cell:focus {
	border-color: var(--c-primary);
	border-style: solid;
	box-shadow: 0 0 0 3px rgba(92, 137, 157, 0.15);
}
.sb-grid.with-issue-labels .issue-label-cell:empty::before {
	content: attr(data-placeholder);
	color: var(--color-muted);
	font-weight: 400;
	font-style: italic;
	pointer-events: none;
}

/* Cellules Fixe détail : présentes dans le DOM mais invisibles tant que
   la colonne n'est pas activée (aucune issue multi-détails). */
.sb-grid:not(.has-multi-details) [data-fixedetailhead],
.sb-grid:not(.has-multi-details) [data-fixedetail] {
	display: none;
}
.sb-grid [data-fixedetailhead],
.sb-grid [data-fixedetail] {
	justify-content: center;
}

.cell {
	display: flex;
	align-items: center;
}

.cell.head {
	font-weight: 600;
	line-height: .8em;
	justify-content: center;
	text-align: center;
}

/* Séparateur horizontal pleine largeur entre chaque ligne */
.row-sep {
	grid-column: 1 / -1;
	height: 1px;
	background: var(--color-divider);
}

/* Masque le séparateur juste avant le .divider (évite la double ligne avant le total) */
.row-sep:has(+ .divider) {
	display: none;
}

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

.total-label {
	color: var(--color-text);
	font-weight: 700;
	/* Le texte "Total" ne doit pas dimensionner la colonne 1 : on lui donne
	   une largeur intrinsèque nulle et on laisse le texte déborder visuellement
	   sur la cellule Type (vide pour la ligne Total). */
	width: 0;
	min-width: 0;
	overflow: visible;
	white-space: nowrap;
}

.divider {
	grid-column: 1 / -1;
	height: 2px;
	background: var(--color-divider);
}

/* En-tête de colonne de cote : label centré, corbeille au survol */
.colhead {
	position: relative;
	justify-content: center;
}

.colhead .js-del-col {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
}

/* Empilage vertical de la cote + commission dans chaque cellule [data-odds] */
.odds-input-stack {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Commission / Boost par cellule de cote : cachés tant que le paramètre global
   n'est pas activé. Mêmes contraintes visuelles (compact, sans steppers). */
.cell-commission,
.cell-boost {
	display: none;
}
.sb-grid.with-commission .cell-commission,
.sb-grid.with-boost .cell-boost {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
}
.cell-commission-label,
.cell-boost-label {
	font-size: 11px;
	color: var(--color-muted);
	font-weight: 500;
}
.cell-boost-icon,
.cell-commission-icon {
	color: var(--color-muted);
	width: 14px;
	height: 14px;
	display: inline-flex;
	align-items: center;
	margin-left: -2px;
}
.cell-boost-icon svg,
.cell-commission-icon svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
}
.cell-commission .num,
.cell-boost .num {
	height: 28px;
}
.cell-commission .num input,
.cell-boost .num input {
	width: 3.5rem;
	font-size: 13px;
	padding: 0 6px;
}
.cell-commission .num-suffix,
.cell-boost .num-suffix {
	font-size: 12px;
	padding-right: 6px;
}
.cell-commission .steppers,
.cell-boost .steppers {
	display: none;
}

/* Couleur du TRJ et des profits totaux selon le TRJ */
.trj-tier-red { color: var(--color-neg); font-weight: 600; }
.trj-tier-dark-orange { color: #C07850; font-weight: 600; }
.trj-tier-light-orange { color: #D97706; font-weight: 600; }
.trj-tier-green { color: var(--color-pos); font-weight: 600; }

/* Centrage des cases à cocher Fixe / Distribution */
.sb-grid [data-fixehead],
.sb-grid [data-distributionhead],
.sb-grid .cell:has(> .radio.fixe),
.sb-grid .cell:has(> .check.dist) {
	justify-content: center;
}

/* Cote totale alignée à droite */
.sb-grid [data-oddstotalhead],
.sb-grid [data-odds-total] {
	justify-content: center;
}

.sb-grid [data-profit-total],
.sb-grid [data-profit] {
	justify-content: flex-end;
	text-align: right;
}

/* Grille détaillée Net/Brut × Back/Lay dans la cellule "Cote totale" */
.odds-detail {
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 2px 8px;
	font-size: 12px;
	align-items: center;
}
.odds-detail-head {
	font-weight: 600;
	color: var(--color-muted);
	text-align: right;
}
.odds-detail-row-label {
	font-weight: 700;
	text-align: left;
}
.odds-detail-value {
	font-family: 'DM Mono', monospace;
	text-align: right;
}
.odds-back-label { color: var(--color-accent-700); }
.odds-lay-label { color: #806b00; }

/* Ligne TRJ : label positionné en absolu à gauche (n'empiète pas sur les autres colonnes),
   valeur alignée à droite (seule la valeur prend la couleur du tier) */
.sb-grid [data-last-odds-total] {
	position: relative;
	justify-content: flex-end;
}
.trj-label {
	position: absolute;
	left: -2em;
	top: 48%;
	transform: translateY(-50%);
	font-weight: 600;
	color: var(--color-muted);
}
.trj-value {
	text-align: right;
}

/* Suffixe unité (€, %, ...) dans un champ .num */
.num-suffix {
	padding: 0 8px 0 0;
	color: var(--color-muted);
	font-family: 'DM Mono', monospace;
	font-size: 15px;
	user-select: none;
}

/* Focus sur le wrapper entier au lieu du seul input */
.num input:focus {
	box-shadow: none;
	border-color: transparent;
}

.num:focus-within {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(92, 137, 157, 0.15);
}

/* Bouton "Ajouter détail" : compact, dans la cellule Actions de l'issue.
   Visible uniquement quand la fonctionnalité globale "détails issues" est active. */
/* Cellule "+ Détail" : positionnée en colonne 2 (sous Type), affichée uniquement
   en mode "détails issues" actif. */
.sb-grid .add-detail-cell {
	display: none;
	grid-column: 2;
	margin-top: -.5rem;
	gap: 6px;
	/* La cellule ne doit PAS dimensionner la colonne Type : on lui donne une
	   largeur intrinsèque nulle et on laisse les boutons déborder visuellement. */
	width: 0;
	min-width: 0;
	overflow: visible;
	white-space: nowrap;
}
.sb-grid.with-details .add-detail-cell,
.sb-grid.with-fixed-gain .add-detail-cell {
	display: flex;
}

/* Cellule Σ issue placée à la colonne Profit (3e en partant de la fin) sur la
   même ligne que la cellule "+ Détail / + Gain fixe". --site-shift ajoute 1
   colonne quand la colonne Site est active. */
.sb-grid .issue-sum-profit {
	grid-column: calc(5 + var(--nb-cotes) + var(--site-shift)) / span 1;
	justify-content: flex-end;
	margin-top: -.5rem;
}

/* Cote moyenne issue : sur la même ligne que les boutons + Détail / + Gain fixe,
   dans la colonne Cote totale (3 + nb_cotes depuis le début, +1 si Site actif). */
.sb-grid .issue-avg-cote {
	grid-column: calc(3 + var(--nb-cotes) + var(--site-shift)) / span 1;
	justify-content: flex-end;
	margin-top: -.5rem;
}

/* Surbrillance d'une ligne (détail) ou d'une issue lors du hover de sa corbeille.
   La box-shadow avec spread étend le fond dans les gap de la grille (gap: .5em 1em →
   0.5em vertical, 0.5em de chaque côté pour le horizontal de 1em → couverture complète). */
/* Surbrillance d'une ligne (détail) ou d'une issue lors du hover de sa corbeille :
   une overlay absolument positionnée couvre la bounding box des cellules visées
   (incluant les gaps de la grille). Les cellules sont rendues au-dessus de
   l'overlay grâce à un z-index supérieur. */
.sb-grid {
	position: relative;
}
.sb-grid > * {
	position: relative;
	z-index: 1;
}
.row-highlight-overlay {
	position: absolute;
	left: 0;
	right: 0;
	background: var(--color-danger-bg);
	z-index: 0;
	pointer-events: none;
	display: none;
}

/* Placeholders d'une ligne Gain fixe sur les colonnes Type/cotes/cote-totale/mise */
.sb-grid .cell.fg-empty {
	background: transparent;
}

/* Cellule profit d'un Gain fixe : input + label au-dessus + corbeille à droite. */
.sb-grid .fixed-gain-profit {
	gap: 6px;
	justify-content: flex-end;
}
.fixed-gain-input-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.fixed-gain-label {
	font-size: 11px;
	color: var(--color-muted);
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* Espacement entre la corbeille du détail et le bouton Back/Lay dans la cellule Type */
.sb-grid [data-type] {
	gap: 4px;
}

/* Visibilité indépendante des deux boutons selon le paramètre actif. */
.sb-grid .js-add-detail,
.sb-grid .js-add-fixed-gain {
	display: none;
}
.sb-grid.with-details .js-add-detail,
.sb-grid.with-fixed-gain .js-add-fixed-gain {
	display: inline-flex;
	align-items: center;
}

/* Cellule large d'un détail "Gain fixe" : un seul input qui couvre Type + cotes + cote totale. */
.sb-grid .fixed-gain-input-cell {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 8px;
	position: relative;
}
.fixed-gain-label {
	font-weight: 600;
	color: var(--color-muted);
	font-size: 13px;
}
.sb-grid .fixed-gain-input-cell .js-del-detail {
	margin-left: auto;
}

/* Bouton "+ Gain fixe" : même style que "+ Détail" */
.sb-grid .js-add-fixed-gain {
	background: transparent;
	border: 1px dashed var(--color-divider);
	border-radius: 5px;
	padding: 2px 8px;
	font-size: 11px;
	color: var(--color-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sb-grid .js-add-fixed-gain .btn-svg {
	width: 0.9rem;
	height: 0.9rem;
	margin-right: 4px;
}
.sb-grid .js-add-fixed-gain:hover {
	background: var(--color-accent-100);
	color: var(--color-accent-700);
	border-color: var(--color-accent-600);
}

.sb-grid .js-add-detail {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 1px dashed var(--color-divider);
	border-radius: 5px;
	padding: 2px 8px;
	font-size: 11px;
	color: var(--color-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sb-grid .js-add-detail .btn-svg {
	width: 0.9rem;
	height: 0.9rem;
	margin-right: 4px;
}
.sb-grid .js-add-detail:hover {
	background: var(--color-accent-100);
	color: var(--color-accent-700);
	border-color: var(--color-accent-600);
}
.sb-grid .js-del-detail {
	background: transparent;
	border: none;
	border-radius: 5px;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	color: var(--color-neg);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.sb-grid .js-del-detail:hover {
	background: var(--color-danger-bg);
	color: var(--color-neg);
}
.sb-grid .js-del-detail .icon,
.sb-grid .js-del-detail svg {
	width: 1rem;
	height: 1rem;
}

/* Conteneur des actions par détail (mise + petit bouton supprimer détail). */
.detail-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

/* Profit cell — affiche la valeur par détail, et optionnellement un total
   issue agrégé sous la dernière valeur. */
.profit-issue-sum {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--color-muted);
	font-style: italic;
}

/* Boutons de suppression (cotes & issues) — icône en rouge par défaut */
.sb-grid .js-del-col,
.sb-grid .js-del-issue {
	background: transparent;
	border: none;
	border-radius: 5px;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	color: var(--color-neg);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.sb-grid .js-del-col:hover,
.sb-grid .js-del-issue:hover {
	background: var(--color-danger-bg);
}

.sb-grid .js-del-col .icon,
.sb-grid .js-del-issue .icon,
.sb-grid .js-del-col svg,
.sb-grid .js-del-issue svg {
	width: 1rem;
	height: 1rem;
}

.type-toggle {
	background: transparent;
	border: none;
	padding: 0;
	width: 90px;
	height: 32px;
	cursor: pointer;
	perspective: 600px;
}

.type-inner {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.4s;
	transform-style: preserve-3d;
}

.type-toggle[data-mode="lay"] .type-inner {
	transform: rotateX(180deg);
}

.type-face {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	backface-visibility: hidden;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
	border: 1px solid;
}

.type-face-back {
	background: var(--color-accent-100);
	color: var(--color-accent-700);
	border-color: var(--color-accent-600);
}

.type-face-lay {
	background: #fff7d4;
	color: #806b00;
	border-color: #e0c43a;
	transform: rotateX(180deg);
}

/* ===== Cellule Mise : structure double (Mise + Engagement) ===== */
.stake-input-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.stake-label {
	font-size: 11px;
	color: var(--color-muted);
	font-weight: 500;
	letter-spacing: 0.02em;
}

[data-stake] {
	gap: 8px;
	justify-content: center;
}

[data-stake] .num input{
	width: 6rem;
	padding-right: 4px;
}

/* Engagement : repliable horizontalement avec transition (largeur + opacité).
   En mode Back, max-width 0 + marge négative pour annuler le gap → la cellule
   ne montre que la Mise. En mode Lay, l'engagement glisse à droite et la
   colonne s'élargit (la card et la grid suivent en s'agrandissant). */
.stake-input-group.liability {
	overflow: hidden;
	transition: max-width 0.4s ease, opacity 0.4s ease, margin-left 0.4s ease;
}

[data-stake]:not(.lay-mode) .stake-input-group.liability {
	max-width: 0;
	opacity: 0;
	margin-left: -8px;
}

[data-stake].lay-mode .stake-input-group.liability {
	max-width: 200px;
	opacity: 1;
	margin-left: 0;
}

/* Transitions douces sur la card et la grille pour suivre les changements de largeur */
.card,
.sb-grid {
	transition: width 0.4s ease;
}

/* ===== Paramètres globaux (bas de page) ===== */
.global-settings {
	margin-top: 1rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}

.global-setting-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-weight: 500;
}

.global-setting-detail {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.global-setting-detail[hidden] {
	display: none;
}

/* Chaque paramètre (checkbox + détail) empilé verticalement.
   Les groupes restent côte à côte grâce au flex-row de .global-settings. */
.global-setting-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
}

.global-setting-detail label {
	font-size: 13px;
	color: var(--color-muted);
}

/* ===== Debug ===== */
.cc-debug-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	font-family: 'DM Mono', monospace;
	font-size: 0.65rem;
	color: var(--color-muted);
	opacity: 0.4;
	padding: 2px 6px;
	border-radius: 4px;
	margin-left: 1rem;
	transition: opacity 0.15s, color 0.15s;
}

.cc-debug-btn:hover { opacity: 0.8; }

.cc-debug-btn--active {
	color: var(--color-pos, #16a34a);
	opacity: 1;
}

.cc-debug-icon {
	filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg);
}

.cc-debug-btn--active .cc-debug-icon {
	filter: invert(45%) sepia(80%) saturate(400%) hue-rotate(90deg) brightness(90%);
}

.cc-debug-dl-btn {
	display: inline-block;
	width: fit-content;
	margin-top: 1rem;
	padding: 7px 14px;
	font-size: 0.78rem;
	font-weight: 600;
	border: 1.5px dashed var(--color-pos, #16a34a);
	border-radius: 8px;
	background: none;
	color: var(--color-pos, #16a34a);
	cursor: pointer;
	transition: background 0.15s;
}

.cc-debug-dl-btn[hidden] {
	display: none;
}

.cc-debug-dl-btn:hover {
	background: color-mix(in srgb, var(--color-pos, #16a34a) 10%, transparent);
}