.cexl {
	--cexl-accent: #1d6f42;
	--cexl-accent-2: #155a35;
	--cexl-border: #d5dbe1;
	--cexl-muted: #5f6b76;
	--cexl-bg: #fff;
	--cexl-soft: #f4f7f5;
	--cexl-error: #b3261e;
	max-width: 760px;
	margin: 1.5em auto;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
	box-sizing: border-box;
}
.cexl *, .cexl *::before, .cexl *::after { box-sizing: border-box; }
.cexl [hidden] { display: none !important; }
.cexl-title { margin: 0 0 .6em; }

.cexl-drop {
	border: 2px dashed var(--cexl-border);
	border-radius: 14px;
	background: var(--cexl-soft);
	padding: 2.2em 1em;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.cexl-drop:hover, .cexl-drop:focus-visible, .cexl-drop.is-over {
	border-color: var(--cexl-accent);
	background: #e9f3ed;
	outline: none;
}
.cexl-drop-icon { width: 44px; height: 44px; color: var(--cexl-accent); }
.cexl-drop-main { margin: .4em 0 .1em; font-weight: 600; font-size: 1.1em; }
.cexl-drop-sub { margin: 0; color: var(--cexl-muted); font-size: .9em; }

.cexl-cloud { display: flex; gap: .5em; justify-content: center; flex-wrap: wrap; margin-top: .8em; }

.cexl-list { list-style: none; margin: 1em 0 0; padding: 0; }
.cexl-item {
	display: flex; align-items: center; gap: .7em;
	padding: .55em .7em;
	border: 1px solid var(--cexl-border);
	border-radius: 10px;
	background: var(--cexl-bg);
	margin-bottom: .45em;
}
.cexl-item.has-error { border-color: var(--cexl-error); }
.cexl-num { width: 1.6em; text-align: center; color: var(--cexl-muted); font-variant-numeric: tabular-nums; }
.cexl-ext {
	font-size: .7em; font-weight: 700; letter-spacing: .04em;
	background: var(--cexl-accent); color: #fff;
	border-radius: 5px; padding: .25em .45em; min-width: 3.4em; text-align: center;
}
.cexl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cexl-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cexl-meta { font-size: .82em; color: var(--cexl-muted); }
.cexl-item.has-error .cexl-meta { color: var(--cexl-error); }
.cexl-item-btns { display: flex; gap: .25em; }
.cexl-icon {
	width: 2em; height: 2em; border-radius: 6px; padding: 0;
	border: 1px solid var(--cexl-border); background: var(--cexl-bg); color: inherit;
	cursor: pointer; font-size: .95em; line-height: 1;
}
.cexl-icon:hover:not(:disabled) { border-color: var(--cexl-accent); color: var(--cexl-accent); }
.cexl-icon:disabled { opacity: .35; cursor: default; }

.cexl-options {
	margin: 1.2em 0 0; padding: 1em 1.1em;
	border: 1px solid var(--cexl-border); border-radius: 12px;
}
.cexl-options legend { font-weight: 700; padding: 0 .3em; }
.cexl-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.cexl-mode {
	display: flex; gap: .55em; align-items: flex-start;
	padding: .7em; border: 1px solid var(--cexl-border); border-radius: 10px; cursor: pointer;
}
.cexl-mode:has(input:checked) { border-color: var(--cexl-accent); background: var(--cexl-soft); }
.cexl-mode:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.cexl-mode input { margin-top: .3em; }
.cexl-mode small { display: block; color: var(--cexl-muted); font-size: .82em; line-height: 1.4; }
.cexl-csv-note { font-size: .85em; color: var(--cexl-muted); margin: .5em 0 0; }

.cexl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-top: .9em; }
.cexl-grid label, .cexl-sheets-opts > label:first-child { display: flex; flex-direction: column; gap: .25em; font-size: .9em; font-weight: 600; }
.cexl select { width: 100%; padding: .4em .5em; border: 1px solid var(--cexl-border); border-radius: 8px; background: var(--cexl-bg); color: inherit; font: inherit; font-weight: 400; }
.cexl-stack-opts, .cexl-sheets-opts { display: flex; flex-direction: column; gap: .4em; margin-top: .9em; font-size: .92em; }
.cexl-stack-opts label, .cexl-sheets-opts label { cursor: pointer; }

.cexl-actions { display: flex; gap: .6em; align-items: center; margin-top: 1.1em; flex-wrap: wrap; }
.cexl-btn {
	appearance: none; border: 1px solid var(--cexl-accent);
	background: var(--cexl-accent); color: #fff;
	padding: .65em 1.4em; border-radius: 10px;
	font: inherit; font-weight: 600; cursor: pointer;
}
.cexl-btn:hover:not(:disabled) { background: var(--cexl-accent-2); border-color: var(--cexl-accent-2); }
.cexl-btn:disabled { opacity: .45; cursor: not-allowed; }
.cexl-btn-ghost { background: transparent; color: var(--cexl-accent); }
.cexl-btn-ghost:hover:not(:disabled) { background: var(--cexl-soft); color: var(--cexl-accent-2); }

.cexl-progress { margin-top: 1em; }
.cexl-bar { height: 8px; border-radius: 99px; background: #e3e8e5; overflow: hidden; }
.cexl-bar span { display: block; height: 100%; width: 0; background: var(--cexl-accent); transition: width .25s; }
.cexl-status { margin: .4em 0 0; font-size: .92em; }
.cexl-again { display: inline-block; margin-top: .3em; font-size: .92em; color: var(--cexl-accent); }

.cexl-msg { margin-top: 1em; padding: .7em .9em; border-radius: 8px; background: var(--cexl-soft); font-size: .92em; }
.cexl-msg.is-error { background: #fdecea; color: var(--cexl-error); }

.cexl-privacy, .cexl-credit { margin: 1em 0 0; font-size: .82em; color: var(--cexl-muted); text-align: center; }
.cexl-credit { margin-top: .2em; }

@media (max-width: 560px) {
	.cexl-modes, .cexl-grid { grid-template-columns: 1fr; }
	.cexl-num { display: none; }
}