/* Tool widget styles. Tokens come from the theme, with fallbacks so the
   plugin still looks right if it is used with another theme. */

.sst-app{
	background:var(--card,#fff);
	border:1px solid var(--line,#e2e8f0);
	border-radius:14px;
	padding:22px;
	box-shadow:0 1px 2px rgba(15,23,42,.04);
}
@media(max-width:600px){.sst-app{padding:16px;border-radius:12px}}

.sst-tool{font-size:.97rem;color:var(--body,#334155)}
.sst-tool *{box-sizing:border-box}

/* ---- form controls ---- */
.sst-field{margin:0 0 16px}
.sst-field:last-child{margin-bottom:0}

.sst-label{
	display:block;
	font-weight:600;
	font-size:.86rem;
	color:var(--ink,#0f172a);
	margin:0 0 6px;
	letter-spacing:.01em;
}

.sst-input,.sst-textarea,.sst-select{
	width:100%;
	font:inherit;
	color:var(--ink,#0f172a);
	background:#fff;
	border:1px solid var(--line,#e2e8f0);
	border-radius:9px;
	padding:10px 12px;
	transition:border-color .15s,box-shadow .15s;
}
.sst-textarea{min-height:170px;resize:vertical;line-height:1.6}
.sst-select{appearance:none;padding-right:34px;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
}
.sst-input:focus,.sst-textarea:focus,.sst-select:focus{
	outline:none;
	border-color:var(--brand,#1d4ed8);
	box-shadow:0 0 0 3px var(--brand-soft,rgba(29,78,216,.13));
}
.sst-input[type=file]{padding:8px 10px}
.sst-input[type=color]{padding:4px;height:44px;cursor:pointer}

.sst-slider{
	width:100%;
	accent-color:var(--brand,#1d4ed8);
	height:22px;
}

.sst-check{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:.9rem;
	color:var(--body,#334155);
	cursor:pointer;
	user-select:none;
	padding:6px 0;
}
.sst-check input{accent-color:var(--brand,#1d4ed8);width:16px;height:16px;margin:0}

.sst-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sst-row>.sst-field{flex:1 1 220px;margin-bottom:0}

/* ---- buttons ---- */
.sst-btn,.sst-btn-alt,.sst-copy{
	font:inherit;
	font-weight:600;
	border-radius:9px;
	cursor:pointer;
	border:1px solid transparent;
	transition:background .15s,border-color .15s,color .15s;
	line-height:1.2;
}
.sst-btn{background:var(--brand,#1d4ed8);color:#fff;padding:11px 20px;font-size:.94rem}
.sst-btn:hover{background:var(--brand-dark,#1e3a8a)}
.sst-btn-alt{background:#fff;color:var(--ink,#0f172a);border-color:var(--line,#e2e8f0);padding:11px 18px;font-size:.94rem}
.sst-btn-alt:hover{border-color:var(--brand,#1d4ed8);color:var(--brand,#1d4ed8)}
.sst-copy{background:var(--soft,#f8fafc);color:var(--body,#334155);border-color:var(--line,#e2e8f0);padding:7px 13px;font-size:.83rem}
.sst-copy:hover{border-color:var(--brand,#1d4ed8);color:var(--brand,#1d4ed8)}
.sst-btn:focus-visible,.sst-btn-alt:focus-visible,.sst-copy:focus-visible{
	outline:2px solid var(--brand,#1d4ed8);outline-offset:2px;
}
.sst-btn[disabled],.sst-btn-alt[disabled]{opacity:.55;cursor:not-allowed}

/* ---- output ---- */
.sst-out{
	background:var(--soft,#f8fafc);
	border:1px solid var(--line,#e2e8f0);
	border-radius:9px;
	padding:14px;
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
	font-size:.86rem;
	line-height:1.6;
	white-space:pre-wrap;
	word-break:break-word;
	overflow:auto;
	max-height:420px;
	min-height:64px;
	color:var(--ink,#0f172a);
}
.sst-out:empty::before{content:"Your result will appear here.";color:var(--sub,#64748b);font-family:inherit}

.sst-msg{
	font-size:.86rem;
	color:var(--sub,#64748b);
	margin:8px 0 0;
	line-height:1.55;
}
.sst-msg:empty{display:none}

/* ---- stat cards ---- */
.sst-stats{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
	gap:10px;
	margin:16px 0;
}
.sst-stat{
	background:var(--soft,#f8fafc);
	border:1px solid var(--line,#e2e8f0);
	border-radius:10px;
	padding:12px 10px;
	text-align:center;
}
.sst-stat b{
	display:block;
	font-size:1.35rem;
	font-weight:700;
	color:var(--brand,#1d4ed8);
	line-height:1.2;
	font-variant-numeric:tabular-nums;
}
.sst-stat span{
	display:block;
	font-size:.74rem;
	text-transform:uppercase;
	letter-spacing:.05em;
	color:var(--sub,#64748b);
	margin-top:3px;
}

/* ---- table ---- */
.sst-table{width:100%;border-collapse:collapse;font-size:.88rem;margin:12px 0}
.sst-table th,.sst-table td{
	text-align:left;
	padding:9px 10px;
	border-bottom:1px solid var(--line,#e2e8f0);
	vertical-align:top;
	word-break:break-word;
}
.sst-table th{
	background:var(--soft,#f8fafc);
	font-weight:600;
	font-size:.78rem;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:var(--sub,#64748b);
}
.sst-table tr:last-child td{border-bottom:0}

/* ---- file drop ---- */
.sst-drop{
	border:2px dashed var(--line,#e2e8f0);
	border-radius:12px;
	padding:28px 18px;
	text-align:center;
	color:var(--sub,#64748b);
	background:var(--soft,#f8fafc);
	cursor:pointer;
	transition:border-color .15s,background .15s;
}
.sst-drop:hover,.sst-drop.is-over{
	border-color:var(--brand,#1d4ed8);
	background:var(--brand-soft,rgba(29,78,216,.06));
}
.sst-preview{
	border:1px solid var(--line,#e2e8f0);
	border-radius:10px;
	padding:10px;
	background:
		linear-gradient(45deg,#f1f5f9 25%,transparent 25%,transparent 75%,#f1f5f9 75%),
		linear-gradient(45deg,#f1f5f9 25%,#fff 25%,#fff 75%,#f1f5f9 75%);
	background-size:16px 16px;
	background-position:0 0,8px 8px;
	text-align:center;
	overflow:hidden;
}
.sst-preview img{max-width:100%;height:auto;display:block;margin:0 auto;border-radius:4px}

/* ---- notes used by the contact form ---- */
.sst-note{border-radius:9px;padding:12px 14px;font-size:.92rem;margin:0 0 16px}
.sst-note--ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.sst-note--err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.sst-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sst-form{max-width:620px}

/* ---- supporting page content around a tool ---- */
.sst-prose{margin:34px 0 0}
.sst-prose h2{font-size:1.32rem;margin:0 0 12px;color:var(--ink,#0f172a);letter-spacing:-.01em}
.sst-prose p{margin:0 0 14px;line-height:1.75;color:var(--body,#334155)}
.sst-steps{margin:0;padding-left:20px}
.sst-steps li{margin:0 0 9px;line-height:1.7;color:var(--body,#334155)}

.sst-faq details{
	border:1px solid var(--line,#e2e8f0);
	border-radius:10px;
	margin:0 0 8px;
	background:#fff;
}
.sst-faq summary{
	cursor:pointer;
	padding:14px 16px;
	font-weight:600;
	color:var(--ink,#0f172a);
	list-style:none;
	position:relative;
	padding-right:44px;
	font-size:.96rem;
}
.sst-faq summary::-webkit-details-marker{display:none}
.sst-faq summary::after{
	content:"";
	position:absolute;
	right:18px;top:50%;
	width:9px;height:9px;
	border-right:2px solid var(--sub,#64748b);
	border-bottom:2px solid var(--sub,#64748b);
	transform:translateY(-70%) rotate(45deg);
	transition:transform .18s;
}
.sst-faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.sst-faq p{margin:0;padding:0 16px 15px;color:var(--body,#334155);line-height:1.7;font-size:.94rem}

.sst-related{margin:40px 0 0}
.sst-related h2{font-size:1.32rem;margin:0 0 14px;color:var(--ink,#0f172a)}

/* ---- ad slots ---- */
.ad-slot{margin:26px 0;text-align:center;overflow:hidden}
.ad-slot__tag{
	display:block;
	font-size:.66rem;
	text-transform:uppercase;
	letter-spacing:.09em;
	color:#94a3b8;
	margin-bottom:5px;
}
.ad-slot ins,.ad-slot iframe,.ad-slot img{max-width:100%}