/* Toolszu Site Check — shared styles for the website checkers (works with the Tailwind classes in the page) */
.sc-input { width: 100%; padding: .95rem 1rem .95rem 2.9rem; border: 1px solid #cbd5e1; border-radius: .9rem; background: #f8fafc;
  font-size: 1.05rem; font-weight: 600; color: #0f172a; transition: all .15s; }
.sc-input:focus { outline: none; background: #fff; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.sc-chip { font-size: .75rem; font-weight: 700; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: .25rem .7rem; transition: all .15s; }
.sc-chip:hover { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; }
#sc-ts:empty { display: none; }
#sc-ts { display: flex; justify-content: center; margin-top: 1rem; }
#sc-ts:not(.is-needed) { height: 0; overflow: hidden; margin: 0; }
.sc-spin { width: 1.25rem; height: 1.25rem; border: 3px solid #bfdbfe; border-top-color: #2563eb; border-radius: 50%; animation: scspin .8s linear infinite; }
@keyframes scspin { to { transform: rotate(360deg); } }
.sc-hero { display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1.4rem; border-radius: 1rem; border: 1px solid; }
.sc-hero-icon { width: 3.25rem; height: 3.25rem; flex-shrink: 0; border-radius: .9rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.sc-hero-title { font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.sc-hero-text { font-size: .9rem; margin-top: .25rem; color: #475569; }
.sc-ok { background: #f0fdf4; border-color: #bbf7d0; } .sc-ok .sc-hero-icon { background: #22c55e; color: #fff; } .sc-ok .sc-hero-title { color: #166534; }
.sc-bad { background: #fef2f2; border-color: #fecaca; } .sc-bad .sc-hero-icon { background: #ef4444; color: #fff; } .sc-bad .sc-hero-title { color: #991b1b; }
.sc-warn { background: #fffbeb; border-color: #fde68a; } .sc-warn .sc-hero-icon { background: #f59e0b; color: #fff; } .sc-warn .sc-hero-title { color: #92400e; }
.sc-info { background: #eff6ff; border-color: #bfdbfe; } .sc-info .sc-hero-icon { background: #2563eb; color: #fff; } .sc-info .sc-hero-title { color: #1e3a8a; }
.sc-card { border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.1rem 1.25rem; background: #fff; }
.sc-card h3 { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #475569; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.sc-card h3 i { color: #2563eb; }
.sc-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid #f1f5f9; font-size: .875rem; }
.sc-rows > div:last-child { border-bottom: 0; }
.sc-rows dt { color: #64748b; font-weight: 600; flex-shrink: 0; }
.sc-rows dd { color: #0f172a; font-weight: 700; text-align: right; word-break: break-word; min-width: 0; }
.sc-stat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .9rem; padding: .9rem; text-align: center; }
.sc-stat b { display: block; font-size: 1.5rem; font-weight: 800; color: #0f172a; line-height: 1.2; }
.sc-stat span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.sc-pre { background: #0f172a; color: #e2e8f0; border-radius: .9rem; padding: 1rem; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto; }
.sc-gauge { --v: 0; --c: #ef4444; width: 6.5rem; height: 6.5rem; border-radius: 50%; display: grid; place-items: center; margin: 0 auto .5rem;
  background: radial-gradient(closest-side, #fff 79%, transparent 80% 100%), conic-gradient(var(--c) calc(var(--v) * 1%), #e2e8f0 0); }
.sc-gauge b { font-size: 1.75rem; font-weight: 800; color: var(--c); }
.sc-metric { border: 1px solid #e2e8f0; border-radius: .9rem; padding: .8rem 1rem; background: #fff; }
.sc-metric p:first-child { font-size: .72rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.sc-metric p:last-child { font-size: 1.25rem; font-weight: 800; margin-top: .15rem; }
.sc-good { color: #16a34a; } .sc-avg { color: #d97706; } .sc-poor { color: #dc2626; }
.sc-seg { display: inline-flex; background: #f1f5f9; padding: .25rem; border-radius: .8rem; }
.sc-seg button { padding: .5rem .9rem; border-radius: .6rem; font-weight: 700; font-size: .85rem; color: #64748b; }
.sc-seg button.is-on { background: #fff; color: #2563eb; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
@media (max-width: 640px) { .sc-hero { flex-direction: column; text-align: center; } .sc-rows > div { flex-direction: column; gap: .15rem; } .sc-rows dd { text-align: left; } }
.sc-btn { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; padding: .4rem .7rem; border-radius: .5rem;
  border: 1px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer; transition: all .15s; white-space: nowrap; }
.sc-btn:hover { border-color: #93c5fd; color: #1d4ed8; background: #eff6ff; }
/* The "hidden" attribute must always win over Tailwind display classes (flex, grid …) on these pages */
[hidden] { display: none !important; }
/* Result layout — plain CSS, so it never depends on which Tailwind classes the site's CSS build contains */
.sc-stack > * + * { margin-top: 1.25rem; }
.sc-g4, .sc-g3, .sc-g2, .sc-g2s { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-g3, .sc-g2, .sc-g2s { grid-template-columns: minmax(0, 1fr); }
.sc-g2 { gap: 1.25rem; }
@media (min-width: 640px) { .sc-g3, .sc-g2s { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .sc-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sc-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sc-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sc-g2s { flex: 1; }
.sc-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; gap: 1rem; }
.sc-split { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .sc-split { flex-direction: row; align-items: flex-start; } }
.sc-split > div { min-width: 0; flex: 1; }
.sc-shot { display: block; width: 100%; max-width: 12rem; height: auto; max-height: 9rem; object-fit: cover; object-position: top; border: 1px solid #e2e8f0; border-radius: .75rem; flex-shrink: 0; }
.sc-shot-phone { max-width: 10rem; max-height: 20rem; margin: 0 auto; }
@media (min-width: 640px) { .sc-shot-phone { margin: 0; } }
.sc-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.sc-mt2 { margin-top: .5rem; } .sc-mt3 { margin-top: .75rem; } .sc-mb3 { margin-bottom: .75rem; }
.sc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.sc-list > li + li { border-top: 1px solid #f1f5f9; }
.sc-li { padding: .625rem 0; list-style: none; }
.sc-li-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sc-li-row > span { flex-shrink: 0; }
.sc-note { font-size: .75rem; color: #94a3b8; margin-top: 1rem; }
.sc-badge { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 700; padding: .25rem .625rem; border-radius: 999px; border: 1px solid; }
.sc-b-ok { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; } .sc-b-bad { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.sc-b-warn { background: #fffbeb; color: #92400e; border-color: #fde68a; } .sc-b-info { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.sc-b-mute { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.sc-card p, .sc-card ul { line-height: 1.55; }