/* ToolHub shared tool-UI runtime styles. Loaded site-wide (small, critical). */
:root{
	--th-navy:#0a1628;
	--th-navy-light:#132238;
	--th-green:#1D9E75;
	--th-green-dark:#167a5c;
	--th-border:#e2e8f0;
	--th-muted:#64748b;
	--th-bg:#f8fafc;
	--th-radius:14px;
}

.th-dropzone{
	border:2px dashed var(--th-border);
	border-radius:var(--th-radius);
	padding:48px 24px;
	text-align:center;
	background:#fff;
	cursor:pointer;
	transition:border-color .15s ease, background .15s ease;
}
.th-dropzone.is-dragover{ border-color:var(--th-green); background:#f0faf6; }
.th-dropzone input[type=file]{ display:none; }
.th-dropzone .th-dz-icon{ font-size:32px; margin-bottom:8px; }
.th-dropzone .th-dz-hint{ color:var(--th-muted); font-size:14px; margin-top:4px; }

.th-file-list{ list-style:none; margin:16px 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.th-file-item{
	display:flex; align-items:center; gap:12px;
	background:#fff; border:1px solid var(--th-border); border-radius:10px; padding:10px 14px;
	cursor:grab;
}
.th-file-item .th-file-name{ flex:1; font-size:14px; word-break:break-all; }
.th-file-item .th-file-remove{ color:#e11d48; cursor:pointer; background:none; border:0; font-size:16px; }

.th-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	background:var(--th-green); color:#fff; border:0; border-radius:10px;
	padding:12px 22px; font-weight:600; font-size:15px; cursor:pointer;
	transition:background .15s ease, transform .1s ease;
}
.th-btn:hover{ background:var(--th-green-dark); }
.th-btn:active{ transform:scale(.98); }
.th-btn:disabled{ background:#a3b3c2; cursor:not-allowed; }
.th-btn-secondary{ background:var(--th-navy); }
.th-btn-secondary:hover{ background:var(--th-navy-light); }
.th-btn-outline{ background:transparent; color:var(--th-navy); border:1px solid var(--th-border); }

.th-progress{ height:6px; border-radius:4px; background:var(--th-border); overflow:hidden; margin:16px 0; }
.th-progress-bar{ height:100%; background:var(--th-green); width:0%; transition:width .2s ease; }

.th-toast{
	position:fixed; bottom:24px; right:24px; background:var(--th-navy); color:#fff;
	padding:12px 18px; border-radius:10px; font-size:14px; opacity:0; transform:translateY(10px);
	transition:opacity .2s ease, transform .2s ease; z-index:9999; max-width:320px;
}
.th-toast.is-visible{ opacity:1; transform:translateY(0); }
.th-toast.is-error{ background:#b91c1c; }

.th-panel{ background:#fff; border:1px solid var(--th-border); border-radius:var(--th-radius); padding:24px; }
.th-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:782px){ .th-grid-2{ grid-template-columns:1fr; } }

.th-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.th-field label{ font-weight:600; font-size:13px; color:var(--th-navy); }
.th-field input[type=text],
.th-field input[type=number],
.th-field input[type=email],
.th-field input[type=date],
.th-field select,
.th-field textarea{
	border:1px solid var(--th-border); border-radius:8px; padding:10px 12px; font-size:14px; font-family:inherit;
}
.th-field textarea{ resize:vertical; }

.th-stat-pill{ display:inline-flex; gap:6px; align-items:center; background:var(--th-bg); border-radius:999px; padding:6px 14px; font-size:13px; color:var(--th-navy); }