/* detail-ui-contract:light-first | mobile-safe | reduced-motion | focus-visible */
/* Toolssok shared detail UI — light-first, mobile-first */
:root{--ts-green:#0E6E5C;--ts-bg:#f7f8f4;--ts-line:#e3e9df;--ts-shadow:0 14px 38px rgba(38,63,45,.09);--ts-sun:#fff5cf;--ts-sky:#edf7ff}
html{color-scheme:light}
body{background:radial-gradient(circle at 12% 0%,rgba(255,245,207,.62),transparent 25rem),radial-gradient(circle at 90% 4%,rgba(237,247,255,.72),transparent 28rem),var(--ts-bg)!important;color:#1c241f!important}
main{max-width:820px!important;padding:22px 16px 42px!important}
main>h1,h1{letter-spacing:-.035em}
.tool-card,.card,.panel,.question-card,.result-card{border-color:var(--ts-line)!important;border-radius:22px!important;box-shadow:var(--ts-shadow)!important}
input,select,textarea{min-height:46px;border-radius:12px!important}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(14,110,92,.55)!important;box-shadow:0 0 0 4px rgba(14,110,92,.09)}
button{min-height:44px;border-radius:13px}
button:focus-visible,a:focus-visible{outline:3px solid rgba(14,110,92,.25);outline-offset:3px}
@media(max-width:600px){main{padding:14px 12px 34px!important}.tool-card,.card,.panel,.question-card,.result-card{border-radius:19px!important}.field-row,.result-stats{flex-direction:column!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}