/* Alovio Calculator — Pro · shared admin console (Quote PDF, Webhooks, Analytics).
   Same coal/flame identity as the license console and the free 2.0.1 admin. */

.alvx {
	max-width: 760px;
	margin: clamp(24px, 6vh, 56px) auto 56px;
	--alv-flame: #f97316;
	--alv-flame-deep: #ea580c;
	--alv-flame-soft: #ffedd5;
	--alv-flame-border: #fed7aa;
	--alv-coal: #1c1917;
	--alv-coal-2: #292524;
	--alv-ink: #1f2328;
	--alv-ink-2: #57606a;
	--alv-muted: #8b949e;
	--alv-line: #e7e5e4;
	--alv-line-2: #d6d3d1;
}
.alvx--wide { max-width: 980px; }

.alvx-card {
	background: #fff;
	border: 1px solid var(--alv-line);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 18px 40px -18px rgba(28, 25, 23, .25);
	overflow: hidden;
}

/* ---- header band ---- */
.alvx-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 28px;
	color: #fff;
	background:
		radial-gradient(120% 170% at 100% 0%, rgba(249, 115, 22, .22), transparent 55%),
		linear-gradient(135deg, var(--alv-coal-2) 0%, var(--alv-coal) 60%, #141110 100%);
}
.alvx-brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.alvx-mark {
	display: grid; place-items: center;
	width: 38px; height: 38px; border-radius: 10px;
	background: linear-gradient(160deg, #fb923c, #f97316 60%, #ea580c);
	box-shadow: 0 5px 14px -3px rgba(249, 115, 22, .55);
	flex: none;
}
.alvx-mark svg { width: 20px; height: 20px; display: block; fill: #fff; }
.alvx-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.alvx-brand-name { font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.alvx-brand-sub { font-size: 11px; color: #a8a29e; text-transform: uppercase; letter-spacing: .12em; }

/* ---- body ---- */
.alvx-body { padding: 26px 28px; }
.alvx-intro { margin: 0 0 20px; color: var(--alv-ink-2); font-size: 14px; line-height: 1.6; max-width: 60ch; }

/* alerts */
.alvx-alert {
	display: flex; gap: 10px; align-items: flex-start;
	padding: 11px 14px; border-radius: 10px;
	font-size: 13.5px; line-height: 1.45;
	margin-bottom: 20px; border: 1px solid;
}
.alvx-alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.alvx-alert--success { background: #ecfdf3; border-color: #bbe5c8; color: #14622f; }
.alvx-alert--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* sections + fields */
.alvx-section {
	font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .09em;
	color: #79716b;
	margin: 26px 0 14px; padding-top: 18px;
	border-top: 1px solid #f0efee;
}
.alvx-section:first-child, .alvx-alert + .alvx-section, .alvx-intro + form .alvx-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.alvx-field { margin: 0 0 18px; }
.alvx-label { display: block; font-size: 13px; font-weight: 600; color: var(--alv-ink); margin-bottom: 7px; }
.alvx-hint { margin: 7px 0 0; font-size: 12.5px; color: var(--alv-muted); line-height: 1.5; }

.alvx-input, .alvx-textarea {
	box-sizing: border-box; width: 100%; max-width: 480px;
	font-size: 14px; color: var(--alv-ink); background: #fff;
	border: 1.5px solid var(--alv-line-2); border-radius: 10px;
	transition: border-color .15s, box-shadow .15s;
}
.alvx-input { height: 42px; padding: 0 13px; }
.alvx-textarea { padding: 10px 13px; line-height: 1.5; resize: vertical; }
.alvx-input:focus, .alvx-textarea:focus { outline: none; border-color: var(--alv-flame); box-shadow: 0 0 0 3px rgba(249, 115, 22, .18); }
.alvx-input--sm { width: 110px; }
.alvx-input--code, .alvx-textarea--code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .3px; }
.alvx-textarea--wide { max-width: 100%; }

.alvx-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alvx-inline .alvx-sublabel { font-size: 13px; color: var(--alv-ink-2); font-weight: 500; }

/* checkbox rows */
.alvx-check { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 10px; font-size: 13.5px; color: var(--alv-ink); line-height: 1.45; cursor: pointer; }
.alvx-check input[type="checkbox"] { margin: 1px 0 0; accent-color: var(--alv-flame); width: 16px; height: 16px; flex: none; }

/* colour input + code chip */
.alvx-color { display: inline-flex; align-items: center; gap: 10px; }
.alvx-color input[type="color"] {
	appearance: none; -webkit-appearance: none;
	width: 42px; height: 42px; padding: 3px;
	background: #fff; border: 1.5px solid var(--alv-line-2); border-radius: 10px; cursor: pointer;
}
.alvx-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.alvx-color input[type="color"]::-webkit-color-swatch { border: none; border-radius: 7px; }
.alvx-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px; color: var(--alv-ink-2);
	background: #fafaf9; border: 1px solid var(--alv-line); border-radius: 7px;
	padding: 4px 8px;
}

/* logo preview */
.alvx-logo-preview {
	display: block; max-height: 52px; margin-bottom: 10px;
	padding: 6px 8px; background: #fafaf9;
	border: 1px solid var(--alv-line); border-radius: 10px;
}

/* buttons */
.alvx-btn {
	appearance: none; cursor: pointer; text-decoration: none;
	border: 1.5px solid transparent; border-radius: 10px;
	height: 42px; padding: 0 20px; box-sizing: border-box;
	font-size: 14px; font-weight: 600; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	white-space: nowrap;
	transition: transform .06s ease, background .15s, border-color .15s, box-shadow .15s, filter .15s;
}
.alvx-btn:active { transform: translateY(1px); }
.alvx-btn--primary {
	background: linear-gradient(160deg, #fb923c, #f97316 55%, #ea580c);
	color: #fff;
	box-shadow: 0 7px 18px -7px rgba(249, 115, 22, .75);
}
.alvx-btn--primary:hover { filter: brightness(.96); color: #fff; }
.alvx-btn--primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(249, 115, 22, .4); }
.alvx-btn--ghost { background: #fff; color: var(--alv-ink-2); border-color: var(--alv-line-2); }
.alvx-btn--ghost:hover { border-color: var(--alv-flame-border); color: var(--alv-flame-deep); background: var(--alv-flame-soft); }
.alvx-danger { background: none; border: 0; padding: 0; font-size: 13px; color: #b91c1c; cursor: pointer; }
.alvx-danger:hover { text-decoration: underline; }

.alvx-actions { margin-top: 24px; padding-top: 18px; border-top: 1px solid #f0efee; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- analytics ---- */
.alvx-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--alv-line);
	border: 1px solid var(--alv-line);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 4px;
}
.alvx-cell { background: #fafaf9; padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.alvx-cell-k { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: #79716b; font-weight: 600; }
.alvx-cell-v { font-size: 26px; color: var(--alv-ink); font-weight: 700; line-height: 1.15; }

.alvx-chart { display: flex; align-items: flex-end; gap: 3px; height: 130px; margin-top: 4px; }
.alvx-bar {
	flex: 1; min-height: 2px;
	background: linear-gradient(180deg, #fb923c, #f97316);
	border-radius: 3px 3px 0 0; opacity: .85;
	transition: opacity .12s;
}
.alvx-bar:hover { opacity: 1; }

.alvx-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.alvx-table th {
	font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
	color: #79716b; font-weight: 600; text-align: left;
	padding: 0 12px 9px; border-bottom: 1px solid var(--alv-line-2);
}
.alvx-table td { padding: 11px 12px; border-bottom: 1px solid #f0efee; font-size: 13.5px; color: var(--alv-ink); }
.alvx-table tr:last-child td { border-bottom: 0; }
.alvx-table tr:hover td { background: #fafaf9; }
.alvx-table .num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
	.alvx { margin-top: 16px; }
	.alvx-body { padding: 20px 18px; }
	.alvx-grid { grid-template-columns: 1fr; }
	.alvx-input, .alvx-textarea { max-width: 100%; }
}