@charset "utf-8";
/*
	MBTXW.COM Copyright (C)2008-2099 www.mbtxw.com
	Author: mbtxw.com, QQ:536205792.
    Special note: do not modify this document without permission.
*/

.section-tool {transition:background-color;}

.section-tool .wrapper-box {
  min-height:100vh;
  font-family:'Inter', sans-serif;
  max-width:8xl;
  margin-left:auto;
  margin-right:auto;
}

/*工具选项框*/
.tool-option-box {
  background-color:white;
  border-radius:1rem;
  padding:2rem;
  box-shadow:var(--card-shadow);
  flex:1;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}

@media (min-width: 768px) {
.tool-option-box {padding:2.5rem;}
}
.dark .tool-option-box {background-color:#1f2937;}

.tool-option-title {
  font-size:1.5rem;
  font-weight:600;
  color:#1f2937;
  margin-bottom:2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.dark .tool-option-title {color:white;}

.tool-option-title .title-icon {color:#2563eb;margin-right:0.75rem;font-size:1.25em;}
.dark .tool-option-title .title-icon {color:#f0f0f0;}

@media (max-width:640px) {
.tool-option-title {font-size:1.2rem;}
.tool-option-title .title-icon {font-size:1.2em;}
.tool-option-formula {font-size:0.8rem !important;}
}

.tool-option-formula {
  display:inline-flex;
  align-items:center;
  color:var(--primary-color);
  font-weight:500;
  font-size:1rem;
  padding-left:1rem;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}
.dark .tool-option-formula {color:#f0f0f0;}


/* 选项网格布局 */
.tool-option-values {display:grid;grid-template-columns:repeat(2, 1fr);gap:1.5rem;}
@media (min-width: 640px) {
    .tool-option-values {grid-template-columns:repeat(3, 1fr);
    }
}
@media (min-width: 768px) {
    .tool-option-values {grid-template-columns:repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    .tool-option-values {grid-template-columns:repeat(5, 1fr);
    }
}

.tool-option-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.5rem;
  border-radius:0.75rem;
  height:100%;
  transition:all 300ms ease;
  text-decoration:none;
  background-color:#ffffff;
  box-shadow:0 0 10px rgba(0,0,0,.1);
}
.tool-option-card .option-icon {color:#2563eb;}

/* 悬停状态 */
.tool-option-card:hover {background-color:#f0f4f8;transform:translateY(-2px);}
.tool-option-card:hover .option-icon {color:#ff0000;}
.tool-option-card:hover .option-desc {color:#ff0000;}

/* 暗黑模式专属样式 */
.dark .tool-option-card {background-color:#374151;}
.dark .tool-option-card .option-icon {color:#F9FAFB !important;}
.dark .tool-option-card .option-desc {color:#E5E7EB !important;}
.dark .tool-option-card:hover {background-color:#4b5563;}

/* 文本通用样式 - 两种模式共享 */
.tool-option-card .option-icon {font-size:1.875rem;margin-bottom:0.75rem;transition:transform 300ms ease;}
.tool-option-card:hover .option-icon {transform:scale(1.1);}
.tool-option-card .option-desc {font-size:0.875rem;text-align:center;margin:0;color:#1F2937;}




.tool-tab-ok {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-radius: 0.5rem;
  transition: all 0.3s;
  background-color: #2563eb;
  color: white;
  display: flex;
  align-items: center;
}
.dark .tool-tab-ok {background-color:#374151;}
.dark .tool-tab-on {color:#f0f0f0;}
.dark .tool-tab-on:hover {background-color:#4b5563;color:#f0f0f0;}

.tool-tab-on {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-radius: 0.5rem;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  color: #374151;
}
.tool-tab-on:hover {background-color:#eff6ff;}




.tool-content-box {
  background-color:white;
  border-radius:1rem;
  padding:2rem;
  margin-bottom:2.5rem;
  box-shadow:var(--card-shadow);
  transform:var(--transform-default, none);
  transition:all var(--transition-duration, 0.3s) ease;
}

/* 深色模式背景 */
.dark .tool-content-box {background-color:#1f2937;}


@media (min-width:768px) {
.tool-content-box {padding:2.5rem;}
}

/* 悬停效果 */
.tool-content-box:hover {box-shadow:var(--card-shadow-lg);}

.tool-content-title {
  display:flex;
  align-items:center;
  font-size:1.5rem;
  font-weight:600;
  color:#1f2937;
  margin-bottom:2rem;
}
.dark .tool-content-title {color:white;}

.tool-content-number {
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  background-color:#2563eb;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:1rem;
  font-size:1.125rem;
}
.dark .tool-content-number {background-color:#374151;color:white;}

@media (max-width:640px) {
.tool-content-title {font-size:1.25rem;}
.tool-content-number {width:1.5rem;height:1.5rem;font-size:1rem;margin-right:0.75rem;}
}


.tool-content-subtitle {
  background-color:rgb(15 82 186 / 0.1);
  color:#2563eb;
  padding-left:1.25rem;
  padding-right:1.25rem;
  padding-top:0.75rem;
  padding-bottom:0.75rem;
  border-radius:0.75rem;
  margin-bottom:1.5rem;
  font-weight:500;
  font-size:1rem;
  display:flex;
  align-items:center;
}
.dark .tool-content-subtitle {background-color:rgb(55 65 81 / 0.5);color:#e5e7eb;}



.tool-content-input {
  width:100%;
  padding-left:1.25rem;
  padding-right:1.25rem;
  padding-top:0.875rem;
  padding-bottom:0.875rem;
  border:1px solid #d1d5db;
  border-radius:0.5rem;
  background-color:white;
  font-size:1rem;
  color:#1f2937;
  outline:none;
}
.tool-content-input:focus {
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37, 99, 235, 0.2);
}

.dark .tool-content-input {border-color:#4b5563;background-color:#374151;color:white;}

/* 输入框禁用状态 */
.tool-content-input:disabled {border-color:#e5e7eb;background-color:#f9fafb;color:#9ca3af;cursor:not-allowed;}
.dark .tool-content-input:disabled {border-color:#4b5563;background-color:#374151;color:#6b7280;}



.tool-content-select {
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  outline: none;
  background-color: white;
  font-size: 1rem;
  color: #1f2937;
  appearance: none;
}
.tool-content-content-select:focus {
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37, 99, 235, 0.2);
}
.dark .tool-content-select {border-color:#4b5563;background-color:#374151;color:white;}



.tool-content-label {
  position:absolute;
  bottom:-1.5rem;
  left:0;
  font-size:0.875rem;
  color:#6b7280;
  opacity:0;
  transition:all 0.3s;
  transform:translateY(0.5rem);
  pointer-events:none;
}
.peer:focus ~ .tool-content-label {opacity:1;transform:translateY(0);}
.dark .tool-content-label {color:#9ca3af;}


/*计算结果区域*/
.tool-calculation-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  margin-bottom:1rem;
}

.dark .tool-calculation-title {color:#d1d5db;}

.tool-calculation-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #f9fafb;
  padding: 1.5rem;
  border-radius: 1rem;
}

.dark .tool-calculation-box {background-color:rgba(55, 65, 81, 0.5);}

.tool-calculation-results {display:flex;align-items:center;margin-bottom:1rem;}

.tool-calculation-ico {
  color: #2563eb;
  font-weight: 700;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  margin-right: 1rem;
  font-size: 1.875rem;
  display: flex;
  align-items: center;
}
.dark .tool-calculation-ico {color:#e5e7eb;}

.tool-calculation-reset {display:flex;gap:1rem;}

.tool-calculation-reset-btn {
  background-color:#e5e7eb;
  font-weight:500;
  padding-top:0.75rem;
  padding-bottom:0.75rem;
  padding-left:2rem;
  padding-right:2rem;
  border-radius:0.5rem;
  color:#1f2937;
  transition: background-color 0.2s ease;
}
.tool-calculation-reset-btn:hover {background-color:#d1d5db;transform:translateY(-2px);}


.tool-calculation-btn {
  background-color:#3b82f6;
  font-weight:500;
  padding-top:0.75rem;
  padding-bottom:0.75rem;
  padding-left:3rem;
  padding-right:3rem;
  border-radius:0.5rem;
  color:#fff;
  transition: background-color 0.2s ease;

}
.tool-calculation-btn:hover {background-color:#2563eb;transform:translateY(-2px);}



@media (min-width: 640px) {
.tool-calculation-box {flex-direction:row;}
.tool-calculation-results {margin-bottom:0;}
}

@media (max-width:640px) {
.tool-calculation-box {background-color:transparent;padding:0rem;}
.tool-calculation-results {background-color:#f9fafb;padding:1.5rem;border-radius:1rem;width:100%;}
.tool-calculation-reset {width:100%;}
.tool-calculation-reset-btn {width:100%;}
.dark .tool-calculation-results {background-color:rgba(55, 65, 81, 0.5);}
.dark .tool-calculation-box {background-color:transparent;}
}

/*通用内容图标*/
.tool-content-icon {color:#2563eb;}
.dark .tool-content-icon {color:#e5e7eb;}

.tool-help-box {
  background-color: white;
  border-radius: 1.5rem;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
.tool-help-box {padding:2.5rem;}
}
.dark .tool-help-box {background-color:#1f2937;}

.tool-help-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}
.dark .tool-help-title {color:#d1d5db;}

.tool-help-content {color:#1f2937;}
.tool-help-content > * + * {margin-top:1rem;}
.dark .tool-help-content {color:#9ca3af;}

@media (max-width:640px) {
.tool-help-title {font-size: 1.2rem;}
.tool-help-title i {font-size: 1.5rem;}
}

.subscript {
    position: relative;
    bottom: -0.25rem;
    margin-left: 0.125rem;
    display: inline-block;
    vertical-align: baseline;
    font-size: 0.6em;
    font-weight: 400;
}



/*工具选项*/
.tool-options {display:flex;}
.tool-options label {display:flex;align-items:center;cursor:pointer;font-size:1.125rem;color:#374151;}

.tool-options .tool-radio {position:absolute;opacity:0;width:0;height:0;}

.tool-options .tool-dot {
  position:relative;
  display:inline-block;
  width:1.25rem;
  height:1.25rem;
  border:2px solid #d1d5db;
  border-radius:50%;
  margin-right:0.75rem;
  transition:all 0.2s ease;
}

.tool-options .tool-radio:checked + .tool-dot {border-color:#165DFF;}
.tool-options .tool-radio:checked + .tool-dot::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:0.625rem;
  height:0.625rem;
  border-radius:50%;
  background-color:#165DFF;
}

.dark .tool-options .tool-radio:checked + .tool-dot {border-color:#ffffff;}
.dark .tool-options .tool-radio:checked + .tool-dot::after {background-color:#ffffff;}

.dark .tool-options .tool-option {color:#e5e7eb;}
.dark .tool-options .tool-dot {border-color:#4b5563;}
.dark .tool-options .tool-radio:checked + .tool-dot {background-color:#1f2937;}
.dark .tool-options .tool-option:hover .tool-dot {border-color:#6b7280;}
.dark .tool-options .tool-text {color:#ffffff;}



/*通用的*/
.tool-box-bg {background-color:#FFF;}
.dark .tool-box-bg {background-color:#1f2937;}

.tool-box-bg2 {background-color:#eef0f3;}
.dark .tool-box-bg2 {background-color:#374151;}

.tool-box-bg3 {background-color:#f9fafb;}
.dark .tool-box-bg3 {background-color:#596578;}

.tool-border {border-color:#d1d5db;}
.dark .tool-border {border-color:#4b5563;}


.tool-select {
  width: 100%;
  background-color: #FFF;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 2.5rem;
  appearance: none;
  outline: none;
  transition: var(--transition-custom);
}

.tool-select:focus {
  ring: 2px solid rgba(59, 130, 246, 0.5);
  outline: none;
}
.dark .tool-select {border-color:#4b5563;background-color:#374151;color:#FFF;}

.tool-text {display:block;}
.dark .tool-text {color:#9ca3af;}

.tool-color-white {display:block;}
.dark .tool-color-white {color:#f5f5f5;}

.tool-icon-white {display:block;}
.dark .tool-icon-white {color:#9ca3af;}