#tool-body *,#tool-body ::before,#tool-body ::after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x:;--tw-pan-y:;--tw-pinch-zoom:;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position:;--tw-gradient-via-position:;--tw-gradient-to-position:;--tw-ordinal:;--tw-slashed-zero:;--tw-numeric-figure:;--tw-numeric-spacing:;--tw-numeric-fraction:;--tw-ring-inset:;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / 0.5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-grayscale:;--tw-hue-rotate:;--tw-invert:;--tw-saturate:;--tw-sepia:;--tw-drop-shadow:;--tw-backdrop-blur:;--tw-backdrop-brightness:;--tw-backdrop-contrast:;--tw-backdrop-grayscale:;--tw-backdrop-hue-rotate:;--tw-backdrop-invert:;--tw-backdrop-opacity:;--tw-backdrop-saturate:;--tw-backdrop-sepia:;--tw-contain-size:;--tw-contain-layout:;--tw-contain-paint:;--tw-contain-style:}#tool-body ::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x:;--tw-pan-y:;--tw-pinch-zoom:;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position:;--tw-gradient-via-position:;--tw-gradient-to-position:;--tw-ordinal:;--tw-slashed-zero:;--tw-numeric-figure:;--tw-numeric-spacing:;--tw-numeric-fraction:;--tw-ring-inset:;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / 0.5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-grayscale:;--tw-hue-rotate:;--tw-invert:;--tw-saturate:;--tw-sepia:;--tw-drop-shadow:;--tw-backdrop-blur:;--tw-backdrop-brightness:;--tw-backdrop-contrast:;--tw-backdrop-grayscale:;--tw-backdrop-hue-rotate:;--tw-backdrop-invert:;--tw-backdrop-opacity:;--tw-backdrop-saturate:;--tw-backdrop-sepia:;--tw-contain-size:;--tw-contain-layout:;--tw-contain-paint:;--tw-contain-style:}#tool-body *,#tool-body ::after,#tool-body ::before{box-sizing: border-box;border-width: 0;border-style: solid;border-color: #e5e7eb}#tool-body::after,#tool-body::before{--tw-content: ''}#tool-body :host,#tool-body{line-height: 1.5;-webkit-text-size-adjust: 100%;-moz-tab-size: 4;tab-size: 4;font-family: Inter,system-ui,sans-serif;font-feature-settings: normal;font-variation-settings: normal;-webkit-tap-highlight-color: transparent}#tool-body{margin: 0;line-height: inherit}#tool-body hr{height: 0;color: inherit;border-top-width: 1px}#tool-body abbr:where([title]){-webkit-text-decoration: underline dotted;text-decoration: underline dotted}#tool-body h1,#tool-body h2,#tool-body h3,#tool-body h4,#tool-body h5,#tool-body h6{font-size: inherit;font-weight: inherit}#tool-body a{color: inherit;text-decoration: inherit}#tool-body b,#tool-body strong{font-weight: bolder}#tool-body code,#tool-body kbd,#tool-body pre,#tool-body samp{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-feature-settings: normal;font-variation-settings: normal;font-size: 1em}#tool-body small{font-size: 80%}#tool-body sub,#tool-body sup{font-size: 75%;line-height: 0;position: relative;vertical-align: baseline}#tool-body sub{bottom: -.25em}#tool-body sup{top: -.5em}#tool-body table{text-indent: 0;border-color: inherit;border-collapse: collapse}#tool-body button,#tool-body input,#tool-body optgroup,#tool-body select,#tool-body textarea{font-family: inherit;font-feature-settings: inherit;font-variation-settings: inherit;font-size: 100%;font-weight: inherit;line-height: inherit;letter-spacing: inherit;color: inherit;margin: 0;padding: 0}#tool-body button,#tool-body select{text-transform: none}#tool-body button,#tool-body input:where([type=button]),#tool-body input:where([type=reset]),#tool-body input:where([type=submit]){-webkit-appearance: button;background-color: transparent;background-image: none}:-moz-focusring{outline: auto}:-moz-ui-invalid{box-shadow: none}#tool-body progress{vertical-align: baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height: auto}[type=search]{-webkit-appearance: textfield;outline-offset: -2px}::-webkit-search-decoration{-webkit-appearance: none}::-webkit-file-upload-button{-webkit-appearance: button;font: inherit}#tool-body summary{display: list-item}#tool-body blockquote,#tool-body dd,#tool-body dl,#tool-body figure,#tool-body h1,#tool-body h2,#tool-body h3,#tool-body h4,#tool-body h5,#tool-body h6,#tool-body hr,#tool-body p,#tool-body pre{margin: 0}#tool-body fieldset{margin: 0;padding: 0}#tool-body legend{padding: 0}#tool-body menu,#tool-body ol,#tool-body ul{list-style: none;margin: 0;padding: 0}#tool-body dialog{padding: 0}#tool-body textarea{resize: vertical}#tool-body input::placeholder,#tool-body textarea::placeholder{opacity: 1;color: #9ca3af}[role=button],#tool-body button{cursor: pointer}:disabled{cursor: default}#tool-body audio,#tool-body canvas,#tool-body embed,#tool-body iframe,#tool-body img,#tool-body object,#tool-body svg,#tool-body video{display: block;vertical-align: middle}#tool-body img,#tool-body video{max-width: 100%;height: auto}[hidden]:where(:not([hidden=until-found])){display: none}#tool-body .container{width: 100%}@media (min-width: 640px){#tool-body .container{max-width: 640px}}@media (min-width: 768px){#tool-body .container{max-width: 768px}}@media (min-width: 1024px){#tool-body .container{max-width: 1024px}}@media (min-width: 1280px){#tool-body .container{max-width: 1280px}}@media (min-width: 1536px){#tool-body .container{max-width: 1536px}}#tool-body .fixed{position: fixed}#tool-body .absolute{position: absolute}#tool-body .sticky{position: sticky}#tool-body .inset-0{inset: 0px}#tool-body .z-10{z-index: 10}#tool-body .z-50{z-index: 50}#tool-body .mx-auto{margin-left: auto;margin-right: auto}#tool-body .mb-12{margin-bottom: 3rem}#tool-body .mb-2{margin-bottom: 0.5rem}#tool-body .mb-3{margin-bottom: 0.75rem}#tool-body .mb-4{margin-bottom: 1rem}#tool-body .mb-6{margin-bottom: 1.5rem}#tool-body .mb-8{margin-bottom: 2rem}#tool-body .ml-1{margin-left: 0.25rem}#tool-body .mr-1{margin-right: 0.25rem}#tool-body .mr-2{margin-right: 0.5rem}#tool-body .mr-3{margin-right: 0.75rem}#tool-body .mr-4{margin-right: 1rem}#tool-body .mt-1{margin-top: 0.25rem}#tool-body .mt-12{margin-top: 3rem}#tool-body .mt-2{margin-top: 0.5rem}#tool-body .mt-3{margin-top: 0.75rem}#tool-body .mt-4{margin-top: 1rem}#tool-body .mt-6{margin-top: 1.5rem}#tool-body .flex{display: flex}#tool-body .grid{display: grid}#tool-body .hidden{display: none}#tool-body .h-10{height: 2.5rem}#tool-body .h-12{height: 3rem}#tool-body .h-16{height: 4rem}#tool-body .h-2{height: 0.5rem}#tool-body .h-2\.5{height: 0.625rem}#tool-body .max-h-\[90vh\]{max-height: 90vh}#tool-body .min-h-screen{min-height: 100vh}#tool-body .w-10{width: 2.5rem}#tool-body .w-12{width: 3rem}#tool-body .w-16{width: 4rem}#tool-body .w-full{width: 100%}#tool-body .max-w-3xl{max-width: 48rem}#tool-body .max-w-4xl{max-width: 56rem}#tool-body .max-w-5xl{max-width: 64rem}#tool-body .flex-1{flex: 1 1 0%}#tool-body .flex-shrink-0{flex-shrink: 0}#tool-body .transform{transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes fadeIn{0%{opacity: 0}100%{opacity: 1}}#tool-body .animate-fade-in{animation: fadeIn 0.5s ease-in-out}@keyframes slideUp{0%{transform: translateY(20px);opacity: 0}100%{transform: translateY(0);opacity: 1}}#tool-body .animate-slide-up{animation: slideUp 0.5s ease-in-out}#tool-body .grid-cols-1{grid-template-columns: repeat(1,minmax(0,1fr))}#tool-body .flex-col{flex-direction: column}#tool-body .flex-wrap{flex-wrap: wrap}#tool-body .items-start{align-items: flex-start}#tool-body .items-center{align-items: center}#tool-body .justify-center{justify-content: center}#tool-body .justify-between{justify-content: space-between}#tool-body .gap-3{gap: 0.75rem}#tool-body .gap-4{gap: 1rem}#tool-body .gap-6{gap: 1.5rem}#tool-body .gap-8{gap: 2rem}#tool-body :is(.space-x-4 > :not([hidden]) ~ :not([hidden])){--tw-space-x-reverse: 0;margin-right: calc(1rem * var(--tw-space-x-reverse));margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))}#tool-body :is(.space-x-6 > :not([hidden]) ~ :not([hidden])){--tw-space-x-reverse: 0;margin-right: calc(1.5rem * var(--tw-space-x-reverse));margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))}#tool-body :is(.space-y-2 > :not([hidden]) ~ :not([hidden])){--tw-space-y-reverse: 0;margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))}#tool-body :is(.space-y-3 > :not([hidden]) ~ :not([hidden])){--tw-space-y-reverse: 0;margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))}#tool-body :is(.space-y-4 > :not([hidden]) ~ :not([hidden])){--tw-space-y-reverse: 0;margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom: calc(1rem * var(--tw-space-y-reverse))}#tool-body :is(.divide-y > :not([hidden]) ~ :not([hidden])){--tw-divide-y-reverse: 0;border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width: calc(1px * var(--tw-divide-y-reverse))}#tool-body :is(.divide-gray-200 > :not([hidden]) ~ :not([hidden])){--tw-divide-opacity: 1;border-color: rgb(229 231 235 / var(--tw-divide-opacity,1))}#tool-body .overflow-hidden{overflow: hidden}#tool-body .overflow-y-auto{overflow-y: auto}#tool-body .rounded-full{border-radius: 9999px}#tool-body .rounded-lg{border-radius: 0.5rem}#tool-body .rounded-xl{border-radius: 0.75rem}#tool-body .border{border-width: 1px}#tool-body .border-b{border-bottom-width: 1px}#tool-body .border-t{border-top-width: 1px}#tool-body .border-gray-200{--tw-border-opacity: 1;border-color: rgb(229 231 235 / var(--tw-border-opacity,1))}#tool-body .border-gray-300{--tw-border-opacity: 1;border-color: rgb(209 213 219 / var(--tw-border-opacity,1))}#tool-body .border-gray-700{--tw-border-opacity: 1;border-color: rgb(55 65 81 / var(--tw-border-opacity,1))}#tool-body .bg-black{--tw-bg-opacity: 1;background-color: rgb(0 0 0 / var(--tw-bg-opacity,1))}#tool-body .bg-blue-100{--tw-bg-opacity: 1;background-color: rgb(219 234 254 / var(--tw-bg-opacity,1))}#tool-body .bg-gray-100{--tw-bg-opacity: 1;background-color: rgb(243 244 246 / var(--tw-bg-opacity,1))}#tool-body .bg-gray-200{--tw-bg-opacity: 1;background-color: rgb(229 231 235 / var(--tw-bg-opacity,1))}#tool-body .bg-gray-50{--tw-bg-opacity: 1;background-color: rgb(249 250 251 / var(--tw-bg-opacity,1))}#tool-body .bg-gray-800{--tw-bg-opacity: 1;background-color: rgb(31 41 55 / var(--tw-bg-opacity,1))}#tool-body .bg-green-500{--tw-bg-opacity: 1;background-color: rgb(34 197 94 / var(--tw-bg-opacity,1))}#tool-body .bg-light{--tw-bg-opacity: 1;background-color: rgb(240 247 255 / var(--tw-bg-opacity,1))}#tool-body .bg-primary{--tw-bg-opacity: 1;background-color: rgb(45 125 210 / var(--tw-bg-opacity,1))}#tool-body .bg-white{--tw-bg-opacity: 1;background-color: rgb(255 255 255 / var(--tw-bg-opacity,1))}#tool-body .bg-opacity-50{--tw-bg-opacity: 0.5}#tool-body .p-3{padding: 0.75rem}#tool-body .p-4{padding: 1rem}#tool-body .p-6{padding: 1.5rem}#tool-body .p-8{padding: 2rem}#tool-body .px-4{padding-left: 1rem;padding-right: 1rem}#tool-body .px-6{padding-left: 1.5rem;padding-right: 1.5rem}#tool-body .px-8{padding-left: 2rem;padding-right: 2rem}#tool-body .py-12{padding-top: 3rem;padding-bottom: 3rem}#tool-body .py-16{padding-top: 4rem;padding-bottom: 4rem}#tool-body .py-2{padding-top: 0.5rem;padding-bottom: 0.5rem}#tool-body .py-3{padding-top: 0.75rem;padding-bottom: 0.75rem}#tool-body .py-8{padding-top: 2rem;padding-bottom: 2rem}#tool-body .pt-6{padding-top: 1.5rem}#tool-body .text-left{text-align: left}#tool-body .text-center{text-align: center}#tool-body .text-2xl{font-size: 1.5rem;line-height: 2rem}#tool-body .text-3xl{font-size: 1.875rem;line-height: 2.25rem}#tool-body .text-4xl{font-size: 2.25rem;line-height: 2.5rem}#tool-body .text-lg{font-size: 1.125rem;line-height: 1.75rem}#tool-body .text-sm{font-size: 0.875rem;line-height: 1.25rem}#tool-body .text-xl{font-size: 1.25rem;line-height: 1.75rem}#tool-body .font-bold{font-weight: 700}#tool-body .font-medium{font-weight: 500}#tool-body .font-semibold{font-weight: 600}#tool-body .text-gray-300{--tw-text-opacity: 1;color: rgb(209 213 219 / var(--tw-text-opacity,1))}#tool-body .text-gray-400{--tw-text-opacity: 1;color: rgb(156 163 175 / var(--tw-text-opacity,1))}#tool-body .text-gray-500{--tw-text-opacity: 1;color: rgb(107 114 128 / var(--tw-text-opacity,1))}#tool-body .text-gray-600{--tw-text-opacity: 1;color: rgb(75 85 99 / var(--tw-text-opacity,1))}#tool-body .text-gray-700{--tw-text-opacity: 1;color: rgb(55 65 81 / var(--tw-text-opacity,1))}#tool-body .text-gray-800{--tw-text-opacity: 1;color: rgb(31 41 55 / var(--tw-text-opacity,1))}#tool-body .text-green-500{--tw-text-opacity: 1;color: rgb(34 197 94 / var(--tw-text-opacity,1))}#tool-body .text-primary{--tw-text-opacity: 1;color: rgb(45 125 210 / var(--tw-text-opacity,1))}#tool-body .text-red-500{--tw-text-opacity: 1;color: rgb(239 68 68 / var(--tw-text-opacity,1))}#tool-body .text-white{--tw-text-opacity: 1;color: rgb(255 255 255 / var(--tw-text-opacity,1))}#tool-body .text-yellow-500{--tw-text-opacity: 1;color: rgb(234 179 8 / var(--tw-text-opacity,1))}#tool-body .opacity-80{opacity: 0.8}#tool-body .shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#tool-body .shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#tool-body .shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#tool-body .transition-all{transition-property: all;transition-timing-function: cubic-bezier(0.4,0,0.2,1);transition-duration: 150ms}#tool-body .transition-colors{transition-property: color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function: cubic-bezier(0.4,0,0.2,1);transition-duration: 150ms}#tool-body .transition-transform{transition-property: transform;transition-timing-function: cubic-bezier(0.4,0,0.2,1);transition-duration: 150ms}#tool-body .text-shadow{text-shadow: 0 2px 4px rgba(0,0,0,0.1);}#tool-body .bg-gradient-blue{background: linear-gradient(135deg,#2D7DD2 0%,#165DFF 100%);}#tool-body .card-hover{transition: all 0.3s ease;}#tool-body .card-hover:hover{transform: translateY(-5px);box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);}#tool-body .progress-bar{transition: width 0.1s ease-in-out;}@keyframes shine{0%{transform: translateX(-100%) rotate(30deg);}100%{transform: translateX(100%) rotate(30deg);}}#tool-body .hover\:-translate-y-1:hover{--tw-translate-y: -0.25rem;transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#tool-body .hover\:bg-blue-700:hover{--tw-bg-opacity: 1;background-color: rgb(29 78 216 / var(--tw-bg-opacity,1))}#tool-body .hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color: rgb(229 231 235 / var(--tw-bg-opacity,1))}#tool-body .hover\:bg-green-600:hover{--tw-bg-opacity: 1;background-color: rgb(22 163 74 / var(--tw-bg-opacity,1))}#tool-body .hover\:text-blue-700:hover{--tw-text-opacity: 1;color: rgb(29 78 216 / var(--tw-text-opacity,1))}#tool-body .hover\:text-gray-700:hover{--tw-text-opacity: 1;color: rgb(55 65 81 / var(--tw-text-opacity,1))}#tool-body .hover\:text-primary:hover{--tw-text-opacity: 1;color: rgb(45 125 210 / var(--tw-text-opacity,1))}#tool-body .hover\:text-red-600:hover{--tw-text-opacity: 1;color: rgb(220 38 38 / var(--tw-text-opacity,1))}#tool-body .hover\:text-white:hover{--tw-text-opacity: 1;color: rgb(255 255 255 / var(--tw-text-opacity,1))}#tool-body .hover\:shadow-xl:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#tool-body .focus\:outline-none:focus{outline: 2px solid transparent;outline-offset: 2px}#tool-body .focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}#tool-body .focus\:ring-primary:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(45 125 210 / var(--tw-ring-opacity,1))}@media (min-width: 768px){#tool-body .md\:mb-0{margin-bottom: 0px}#tool-body .md\:mt-0{margin-top: 0px}#tool-body .md\:flex{display: flex}#tool-body .md\:hidden{display: none}#tool-body .md\:grid-cols-2{grid-template-columns: repeat(2,minmax(0,1fr))}#tool-body .md\:grid-cols-3{grid-template-columns: repeat(3,minmax(0,1fr))}#tool-body .md\:flex-row{flex-direction: row}#tool-body .md\:items-center{align-items: center}#tool-body :is(.md\:space-x-8 > :not([hidden]) ~ :not([hidden])){--tw-space-x-reverse: 0;margin-right: calc(2rem * var(--tw-space-x-reverse));margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))}#tool-body .md\:text-2xl{font-size: 1.5rem;line-height: 2rem}#tool-body .md\:text-5xl{font-size: 3rem;line-height: 1}}


#tool-body {
  font-family: 'Inter', system-ui, sans-serif;
}

#tool-body .qq-input:focus {
  border-color: #2D7DD2;
  box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.2);
}

#tool-body .btn-evaluate {
  background: linear-gradient(135deg, #2D7DD2 0%, #165DFF 100%);
  transition: all 0.3s ease;
}

#tool-body .btn-evaluate:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(45, 125, 210, 0.3);
}

#tool-body .btn-evaluate:active {
  transform: translateY(0);
}

#tool-body .result-card {
  display: none;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

#tool-body .result-card.show {
  display: block;
  transform: translateY(0);
}

#tool-body .feature-icon {
  transition: all 0.3s ease;
}

#tool-body .feature-item:hover .feature-icon {
  transform: scale(1.2);
  color: #165DFF;
}

#tool-body .history-item {
  transition: all 0.3s ease;
}

#tool-body .history-item:hover {
  background-color: #f0f7ff;
  transform: translateX(5px);
}

#tool-body .loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#tool-body .progress-step {
  transition: all 0.5s ease;
}

#tool-body .progress-step.active {
  color: #165DFF;
  font-weight: bold;
}

#tool-body .progress-step.completed {
  color: #4CAF50;
}

#tool-body .tooltip {
  position: relative;
  display: inline-block;
}

#tool-body .tooltip .tooltip-text {
  visibility: hidden;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
}

#tool-body .tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* 证书样式 */
#tool-body .certificate {
  position: relative;
  width: 800px;
  background: white;
  margin: 0 auto;
  padding: 40px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23E5E7EB" stroke-width="1"/></svg>');
  background-size: 20px 20px;
}

#tool-body .certificate-header {
  text-align: center;
  margin-bottom: 40px;
}

#tool-body .certificate-title {
  font-size: 36px;
  font-weight: bold;
  color: #165DFF;
  margin-bottom: 10px;
}

#tool-body .certificate-subtitle {
  font-size: 18px;
  color: #666;
}

#tool-body .certificate-content {
  text-align: center;
  margin: 40px 0;
}

#tool-body .certificate-qq-number {
  font-size: 48px;
  font-weight: bold;
  color: #165DFF;
  margin: 20px 0;
}

#tool-body .certificate-score {
  font-size: 36px;
  font-weight: bold;
  color: #FF6B35;
  margin: 20px 0;
}

#tool-body .certificate-rank {
  font-size: 24px;
  font-weight: bold;
  color: #4CAF50;
  margin: 20px 0;
}

#tool-body .certificate-details {
  margin: 40px 0;
  text-align: left;
}

#tool-body .certificate-detail-item {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 16px;
}

#tool-body .certificate-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}

#tool-body .certificate-seal {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid #165DFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #165DFF;
  font-weight: bold;
  position: relative;
}

#tool-body .certificate-seal::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 2px dashed #165DFF;
  border-radius: 50%;
  opacity: 0.5;
}

#tool-body .certificate-date {
  text-align: right;
}

/* 响应式调整 */
@media (max-width: 768px) {
  #tool-body .certificate {
    width: 100%;
    height: auto;
    padding: 20px;
  }

  #tool-body .certificate-title {
    font-size: 24px;
  }

  #tool-body .certificate-qq-number {
    font-size: 32px;
  }

  #tool-body .certificate-score {
    font-size: 28px;
  }

  #tool-body .certificate-rank {
    font-size: 20px;
  }

  #tool-body .certificate-seal {
    width: 80px;
    height: 80px;
    font-size: 12px;
  }
}


#tool-body .example-qq{
  background: #e3f2fd;
  border: 1px solid #bbdefb;
  border-radius: 8px;
  padding: 3px 10px;
  color: #1976d2;
  cursor: pointer;
  transition: all .2s;
}
#tool-body .example-qq:hover {
  background: #bbdefb;
  transform: translateY(-2px);
}

#tool-body .progress-step:before{
  content: "❎ "; 
}
#tool-body .progress-step.completed:before{
  content: "✅ "; 
}


/* ===== 夜间模式 ===== */
.theme-dark-mode #tool-body {
  background-color: inherit;
  color: #e0e0e0;
}

.theme-dark-mode #tool-body .qq-input {
  border-color: #3a3a3a;
  color: #ffffff;
}

.theme-dark-mode #tool-body .qq-input::placeholder {
  color: #7a7a7a;
}

.theme-dark-mode #tool-body .qq-input:focus {
  border-color: #2D7DD2;
  box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.3);
}

.theme-dark-mode #tool-body .btn-evaluate {
  background: linear-gradient(135deg, #2D7DD2 0%, #165DFF 100%);
}

.theme-dark-mode #tool-body .result-card {
  background-color: #1e1e1e;
  color: #e0e0e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.theme-dark-mode #tool-body .bg-light {
  background-color: #222;
}

.theme-dark-mode #tool-body .text-gray-800 {
  color: #ffffff;
}

.theme-dark-mode #tool-body .text-gray-700 {
  color: #e0e0e0;
}

.theme-dark-mode #tool-body .text-gray-600 {
  color: #b0b0b0;
}

.theme-dark-mode #tool-body .text-gray-500 {
  color: #909090;
}

.theme-dark-mode #tool-body .bg-white {
  background-color: #333;
}

.theme-dark-mode #tool-body .bg-gray-50 {
  background-color: #252525;
}

.theme-dark-mode #tool-body .border-gray-200 {
  border-color: #333 !important;
}

.theme-dark-mode #tool-body .border-gray-300 {
  border-color: #444 !important;
}

.theme-dark-mode #tool-body a.text-gray-700,
.theme-dark-mode #tool-body a.text-primary {
  color: #bbd0ff;
}

.theme-dark-mode #tool-body a.text-gray-700:hover,
.theme-dark-mode #tool-body a.text-primary:hover {
  color: #ffffff;
}

.theme-dark-mode #tool-body .text-red-500 {
  color: #ff6b6b;
}

.theme-dark-mode #tool-body .text-green-500 {
  color: #6bff6b;
}

.theme-dark-mode #tool-body .bg-gray-100 {
  background-color: #2a2a2a;
}

.theme-dark-mode #tool-body .bg-gray-200 {
  background-color: #333;
}

.theme-dark-mode #tool-body .bg-blue-100 {
  background-color: #1a2b40;
}

.theme-dark-mode #tool-body .history-item:hover {
  background-color: #2a2a3a;
}

.theme-dark-mode #tool-body .feature-item:hover .feature-icon {
  color: #6fa8ff;
}

.theme-dark-mode #tool-body .tooltip .tooltip-text {
  background-color: #000;
  color: #fff;
}

.theme-dark-mode #tool-body .certificate-title {
  color: #6fa8ff;
}

.theme-dark-mode #tool-body .certificate-subtitle,
.theme-dark-mode #tool-body .certificate-detail-item {
  color: #b0b0b0;
}

.theme-dark-mode #tool-body .certificate-qq-number {
  color: #6fa8ff;
}

.theme-dark-mode #tool-body .certificate-score {
  color: #ff9e6b;
}

.theme-dark-mode #tool-body .certificate-rank {
  color: #6bff6b;
}

.theme-dark-mode #tool-body .certificate-seal {
  border-color: #6fa8ff;
  color: #6fa8ff;
}

.theme-dark-mode #tool-body .certificate-seal::before {
  border-color: #6fa8ff;
  opacity: 0.4;
}

.theme-dark-mode #tool-body .example-qq {
  background: #2a3a50;
  border-color: #3a5a80;
  color: #a0c0ff;
}

.theme-dark-mode #tool-body .example-qq:hover {
  background: #3a5070;
}

.theme-dark-mode #tool-body #input-tip {
  color: #a0a0a0;
}

.theme-dark-mode #tool-body #error-message {
  color: #ff7070;
}

.theme-dark-mode #tool-body .w-full.bg-gray-200 {
  background-color: #333 !important;
}

.theme-dark-mode #tool-body .text-green-500 {
  color: #6bff6b;
}

.theme-dark-mode #tool-body .text-gray-400 {
  color: #777;
}

.theme-dark-mode #tool-body :is(.divide-gray-200 > :not([hidden]) ~ :not([hidden])) {
  border-color: #333;
}