/*!
 * 小小兵者武将属性计算器
 * @author mryue
 */
:root{--color-primary:#4CAF50;--color-primary-hover:#45a049;--color-text:#333;--color-text-light:#666;--color-border:#ddd;--color-bg:#f0f0f0;--color-white:white;--border-radius:4px;--border-radius-lg:8px;--spacing-sm:5px;--spacing-md:10px;--spacing-lg:15px;--spacing-xl:20px;--font-size-sm:12px;--font-size-md:14px;--font-size-base:16px;--font-size-lg:18px;--panel-result-bg:#f9f9f9;--panel-result-border:#ddd;--panel-selected-bg:#f0f8ff;--panel-selected-border:#b0e0e6}*{box-sizing:border-box}body{font-family:Arial,sans-serif;background-color:var(--color-bg);margin:0;padding:var(--spacing-xl)}.container{max-width:600px;margin:0 auto;background-color:var(--color-white);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);box-shadow:0 0 10px rgba(0,0,0,0.1)}h1{text-align:center;color:var(--color-text)}h1 .update-time{font-size:var(--font-size-base);color:#888}label{display:block;margin-bottom:var(--spacing-sm);font-weight:bold}select{width:100%;padding:var(--spacing-md);font-size:var(--font-size-base);border:1px solid var(--color-border);border-radius:var(--border-radius);background-color:var(--color-white)}button{display:block;width:100%;padding:var(--spacing-md);font-size:var(--font-size-base);background-color:var(--color-primary);color:var(--color-white);border:none;border-radius:var(--border-radius);cursor:pointer;transition:background-color 0.3s}button:hover{background-color:var(--color-primary-hover)}.attributes-panel{margin-top:var(--spacing-md);padding:var(--spacing-md);border-radius:var(--border-radius);font-size:0;overflow:hidden}.attributes-panel h4{margin-top:0;margin-bottom:var(--spacing-md);font-size:var(--font-size-base)}.attributes-panel>div.attribute,.attributes-panel div.attribute.layui-col-md3{display:inline-block;width:25%;margin-bottom:var(--spacing-md);font-size:var(--font-size-md);padding:0 var(--spacing-sm);vertical-align:top}.attributes-panel>div.attribute span,.attributes-panel div.attribute.layui-col-md3 span{display:inline;width:auto;font-weight:normal}.attributes-panel>div.attribute span:first-child{font-weight:bold}.attributes-panel>div.attribute.has-detail{position:relative;cursor:pointer}.attributes-panel>div.attribute.has-detail::before{content:"?";display:inline-block;margin-right:4px;color:#1890ff;font-size:var(--font-size-sm);font-weight:normal;cursor:pointer}.attributes-panel>div.attribute .detail-tooltip{position:absolute;right:0;bottom:100%;z-index:1000;min-width:150px;max-width:250px;padding:8px 12px;background-color:var(--color-white);border:1px solid #d9d9d9;border-radius:var(--border-radius);box-shadow:0 2px 8px rgba(0,0,0,0.15);font-size:var(--font-size-sm);line-height:1.6;white-space:pre-line;display:none;margin-bottom:4px}.attributes-panel>div.attribute.has-detail:hover .detail-tooltip,.attributes-panel>div.attribute.has-detail.active .detail-tooltip{display:block}.detail-tooltip-item{display:flex;justify-content:space-between;padding:2px 0}.detail-tooltip-item .source-name{color:var(--color-text-light)}.detail-tooltip-item .source-value{color:#1890ff;font-weight:bold}.general-attributes{background-color:#f0fff0;border:1px solid #90ee90}.general-attributes h4{color:#228b22}.beast-attributes{background-color:#fff0f5;border:1px solid #ffb6c1}.beast-attributes h4{color:#ff69b4}.starMap-attributes{background-color:#f0f0f0;border:1px solid #d0d0d0}.starMap-attributes h4{color:#666666}#treasureAttributes{background-color:#f0f8ff;border:1px solid #b0e0e6}#treasureAttributes h4{color:#1e90ff}#treasureAttributes>div.attribute span{display:block;width:100%;text-align:center;font-weight:normal}#treasureAttributes>div.attribute span:first-child{font-weight:bold;margin-bottom:2px}.jade-attributes{background-color:#f0fff0;border:1px solid #90ee90}.jade-attributes h4{color:#32cd32}.equipment-attributes{margin-top:var(--spacing-lg);background-color:#fff8dc;border:1px solid #daa520}.equipment-attributes h4{color:#b8860b}.enchant-attributes{margin-top:var(--spacing-lg);background-color:#e8f5e9;border:1px solid #4CAF50}.enchant-attributes h4{color:#2e7d32}.enchant-attributes>div.attribute{width:33.33%;padding:0 var(--spacing-md)}.mount-attributes{margin-top:var(--spacing-lg);background-color:#ffe4e1;border:1px solid #ffa500}.mount-attributes h4{color:#d35400}.statue-attributes{background-color:#fff5ee;border-color:#ff6347}.statue-attributes h4{color:#dc143c}.gem-attributes{background-color:#fffaf0;border:1px solid #ffd700}.gem-attributes h4,.gem-attributes h5{color:#b8860b}.gem-attributes h5{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-md);font-size:var(--font-size-md)}.gem-item{display:flex;align-items:flex-start;margin-bottom:var(--spacing-md);padding:var(--spacing-sm);background-color:rgba(255,215,0,0.1);border-radius:var(--border-radius)}.gem-name{display:inline-block;width:80px;font-weight:bold;font-size:var(--font-size-md);padding:var(--spacing-sm);border-radius:var(--border-radius);text-align:center;flex-shrink:0}.red-gem{background-color:#ffe4e1;color:#dc143c}.blue-gem{background-color:#e0f7fa;color:#1976d2}.purple-gem{background-color:#f3e5f5;color:#9c27b0}.green-gem{background-color:#e8f5e9;color:#388e3c}.gem-attrs{flex:1;font-size:0}.gem-attrs .attribute{display:inline-block;width:50%;margin-bottom:var(--spacing-sm);font-size:var(--font-size-md);padding:0 var(--spacing-sm)}.talent-attributes{background-color:#f5f0ff;border:1px solid #9370db}.talent-attributes h4{color:#6a5acd}.pet-attributes{background-color:#f0f8ff;border:1px solid #1e90ff}.pet-attributes h4{color:#1e90ff}.saint-attributes{background-color:#fff5ee;border:1px solid #ff6347}.saint-attributes h4{color:#ff6347}.pet-skill-attributes{background-color:#f5fffa;border:1px solid #20b2aa}.pet-skill-attributes h4{color:#20b2aa}.result{margin-top:var(--spacing-xl);padding:var(--spacing-lg);background-color:var(--panel-result-bg);border-radius:var(--border-radius);border:1px solid var(--panel-result-border);font-size:0}.result h3{font-size:var(--font-size-lg);margin-top:0}.result>div.attribute{display:inline-block;width:50%;margin-bottom:var(--spacing-md);font-size:var(--font-size-md);padding:0 var(--spacing-md);vertical-align:top}.result>div.attribute span:first-child{display:inline-block;width:100px;font-weight:bold}.equipment-section,.enchant-section,.mount-attrs-panel{margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background-color:var(--panel-result-bg);border-radius:var(--border-radius);border:1px solid var(--color-border)}.equipment-section h4,.enchant-section h4,.mount-attrs-panel h4{margin-top:0;margin-bottom:var(--spacing-md);color:var(--color-text);font-size:var(--font-size-base)}.enchant-section{margin-top:var(--spacing-xl);background-color:#e8f5e9;border-color:#4CAF50}.enchant-section h4{color:#2e7d32}.equipment-header{display:flex;justify-content:flex-start;align-items:center;margin-bottom:var(--spacing-md);gap:var(--spacing-lg)}.equipment-header h4{margin:0}.equipment-header .layui-btn{flex:1}.equipment-attrs,.enchant-attrs,.statue-attrs{display:flex;flex-wrap:wrap;gap:var(--spacing-md);margin-bottom:15px}.grid-demo{padding:5px}.grid-demo select{width:100%;padding:8px;font-size:var(--font-size-md);border:1px solid var(--color-border);border-radius:var(--border-radius);background-color:var(--color-white)}.equipment-attrs select,.enchant-attrs select,.statue-attrs select{padding:8px;font-size:var(--font-size-md);border:1px solid var(--color-border);border-radius:var(--border-radius);background-color:var(--color-white)}.equipment-attrs select{flex:0 0 calc(20% - 8px);min-width:0}.enchant-attrs .enchant-item,.statue-attrs .enchant-item{flex:0 0 calc(33.333% - 7px);margin-bottom:10px}.enchant-attrs .enchant-value-input,.statue-attrs .enchant-value-input{margin-top:5px}.enchant-attrs .error-message,.statue-attrs .error-message{color:#FF5722;font-size:12px;margin-top:3px;min-height:16px}.enchant-attrs select{flex:0 0 calc(33.333% - 7px)}.enchant-item{flex:0 0 calc(33.333% - 7px)}.enchant-value-input{margin-top:5px}.statue-attrs select{flex:0 0 calc(20% - 10px)}@media (max-width:480px){body{padding:var(--spacing-md)}.container{padding:var(--spacing-md)}.attributes-panel>div.attribute,#treasureAttributes>div.attribute,.enchant-attributes>div.attribute{width:50%}.result>div.attribute{width:100%}.equipment-attrs,.enchant-attrs,.statue-attrs{flex-wrap:wrap}.equipment-attrs select,.statue-attrs select{flex:0 0 calc(50% - 5px)}.enchant-attrs select{flex:0 0 100%}}