#loading-circle,.fuzz{
	right:0;
	bottom:0;
	left:0
}
.main-header{
	z-index:1031
}
#loading-circle{
	z-index:1032;
	position:fixed;
	top:0;
	background-color:rgba(0,0,0,.75);
	text-align:center;
	display:block;
	opacity:1;
	animation:fadeup .4s;
	-webkit-animation:fadeup .3s;
	-moz-animation:fadeup .3s;
	-o-animation:fadeup .3s
}
#loading-circle .fa, #loading-circle .fa-solid, .loading-circle-message{
	background:rgba(0,0,0,.7);
	color:#fff;
	padding:5px;
	box-shadow:0 0 50px #000
}
@keyframes fadeup{
	0%,33%{
		opacity:0
}
	100%{
		opacity:1
}
}
@-webkit-keyframes fadeup{
	0%,33%{
		opacity:0
}
	100%{
		opacity:1
}
}
@-moz-keyframes fadeup{
	0%,33%{
		opacity:0
}
	100%{
		opacity:1
}
}
@-o-keyframes fadeup{
	0%,33%{
		opacity:0
}
	100%{
		opacity:1
}
}
/* Knob overlay wrapper (T1383). Centers the ring + message + log column. */
.loading-knob-wrap{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	text-align:center;
}
.loading-circle-message{
	display:inline-block;
	padding:6px 12px;
	border-radius:10px;
	background:rgba(0,0,0,.7);
	color:#fff;
	font-size:14px;
}
#loading-circle .fa, #loading-circle .fa-solid, #loading-circle .fad {
	height:50px;
	width:50px;
	top:50%;
	margin-top:-25px;
	position:absolute;
	font-size:40px;
	margin-left:-25px;
	border-radius:100%
}
.fuzz{
	position:fixed;
	background:rgba(0,0,0,.5);
	top:0;
	z-index:1031;
	opacity:0;
	overflow:auto;
	padding:15px;
}
.fuzz .vbox-table{
	height:100%;
	margin:auto
}
.fuzz .vbox{
	background-color:#fff;
	padding:20px;
	position:relative;
	color:#333;
	box-shadow:0 5px 15px rgba(0,0,0,.5);
	border:1px solid rgba(0,0,0,.2);
	border-radius:6px;
	outline:0;
	top:-50px;
	transition:all .1s ease-out;
}
.dark .fuzz .vbox{
    background-color:#333;
    color:#fff
}
.fuzz .vbox.visible{
	top:0
}
.fuzz .vbox-content{
	color:#333;
	min-width:250px;
	min-height:150px
}
.dark .fuzz .vbox-content{
    color:#fff
}
.fuzz .vbox-content h4{
	margin:0;
	line-height:1.42857143
}
.fuzz .vbox-close{
	position: absolute;
    text-decoration: none;
    right: 10px;
    top: 5px;
    font-size: 34px;
    font-weight: 700;
    line-height: 37px;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    height: 34px;
    display: block;
    width: 34px;
    text-align: center;
}

.fuzz .vbox-close:hover{
	opacity:.5
}
.err{
	font-size:12px;
	line-height:12px;
	height:12px;
}

.vbox-content .popup-header {
	margin: -20px -20px 0px -20px;
	padding: 20px;
	background-color: #eee;
	border-bottom: 1px solid #ccc;
	border-radius: 3px 3px 0 0;
}

/* Dispatch progress widget — knob.js dial + status + log. Polled by dispatch-progress.js. */
.dispatch-progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.04);
	transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}
.dark .dispatch-progress {
	background: rgba(255, 255, 255, 0.04);
}

/* SVG ring (T1382). Browser tweens stroke-dashoffset → buttery-smooth. */
.dp-ring-wrap {
	position: relative;
	width: 120px;
	height: 120px;
}
.dp-ring {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg); /* 12 o'clock start */
}
.dp-ring-track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.12);
	stroke-width: 8;
}
.dp-ring-fg {
	fill: none;
	stroke: #3498db;
	stroke-width: 8;
	stroke-linecap: round;
	transition: stroke-dashoffset 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), stroke 250ms ease;
}
.dp-ring-label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 22px;
	font-weight: 600;
	color: #3498db;
}

/* Concentric inner ring — opt-in via data-progress-inner on the widget. */
.dp-ring-inner-track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 5;
}
.dp-ring-inner-fg {
	fill: none;
	stroke: #2ecc71;
	stroke-width: 5;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), stroke 250ms ease;
}
.dp-ring-inner-label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + 18px));
	font-size: 11px;
	font-weight: 500;
	color: #2ecc71;
	opacity: 0.85;
}

/* Sweep highlight — small bright arc traveling continuously, signals "alive". */
.dp-ring-sweep {
	fill: none;
	stroke: rgba(255, 255, 255, 0.55);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 20 244;
	stroke-dashoffset: 0;
	animation: dp-ring-sweep 1.8s linear infinite;
}
@keyframes dp-ring-sweep {
	to { stroke-dashoffset: -264; }
}
.dp-ring-wrap.is-complete .dp-ring-sweep,
.dispatch-progress.is-done .dp-ring-sweep,
.dispatch-progress.is-error .dp-ring-sweep,
.dp-ring-wrap.is-error-ring .dp-ring-sweep { animation: none; opacity: 0; }
.dispatch-progress.is-error .dp-ring-fg { stroke: #c0392b; }
.dispatch-progress.is-error .dp-ring-label { color: #c0392b; }
.dispatch-progress.is-stale .dp-ring-fg { stroke: #f39c12; }
.dispatch-progress.is-stale .dp-ring-label { color: #f39c12; }
.dp-ring-wrap.is-error-ring .dp-ring-fg { stroke: #c0392b; }
.dp-ring-wrap.is-error-ring .dp-ring-label { color: #c0392b; }

#loading-circle .loading-circle-log {
	max-width: 480px;
	max-height: 140px;
	margin: 12px auto 0;
	padding: 8px 12px;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 12px;
	line-height: 1.4;
	background: rgba(0,0,0,0.5);
	color: #ddd;
	border-radius: 4px;
	overflow-y: auto;
	white-space: pre-wrap;
	text-align: left;
}
#loading-circle .loading-circle-log:empty { display: none; }
#loading-circle .loading-circle-error {
	display: none;
	max-width: 480px;
	margin: 12px auto 0;
	padding: 8px 12px;
	color: #fff;
	background: #c0392b;
	border-radius: 4px;
	font-size: 13px;
}
#loading-circle .loading-circle-error:not(:empty) { display: block; }

/* Indeterminate spinner — used by the dispatch loading overlay. */
.dp-ring-wrap.is-indeterminate .dp-ring {
	animation: dp-ring-spin 1.2s linear infinite;
}
.dp-ring-wrap.is-indeterminate .dp-ring-fg {
	stroke-dasharray: 80 246.7; /* arc + gap to total CIRCUMFERENCE */
	stroke-dashoffset: 0;
	transition: none;
}
.dp-ring-wrap.is-indeterminate .dp-ring-label { display: none; }
@keyframes dp-ring-spin {
	from { transform: rotate(-90deg); }
	to   { transform: rotate(270deg); }
}

.dispatch-progress .dp-stage {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
	transition: opacity 250ms ease;
}

.dispatch-progress .dp-message {
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	transition: color 250ms ease;
}

.dispatch-progress .dp-log {
	width: 100%;
	max-height: 180px;
	overflow-y: auto;
	margin: 0;
	padding: 8px 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.4;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 4px;
	white-space: pre-wrap;
}
.dark .dispatch-progress .dp-log {
	background: rgba(0, 0, 0, 0.35);
}

.dispatch-progress .dp-error {
	display: none;
	width: 100%;
	padding: 8px 12px;
	color: #fff;
	background: #c0392b;
	border-radius: 4px;
	font-size: 13px;
}
.dispatch-progress.is-error .dp-error {
	display: block;
}

.dispatch-progress.is-stale {
	background: rgba(243, 156, 18, 0.12);
	color: #f39c12;
}
.dispatch-progress.is-stale .dp-stage::after {
	content: " — stale";
	opacity: 0.85;
}