.calcContainer { width: 100%; margin: 0 auto; background: white; border-radius: 16px; box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3); overflow: hidden; }
.header { background: #C06437; color: white; padding: 32px; text-align: center; }
.header h3.calc { font-size: 2.2em; margin: 10px 0 8px 0; font-weight: 700; }
.header p { font-size: 1.2em; opacity: 0.9; margin: 0 0 10px 0; padding-top: 20px; }
.calculator-content { padding: 32px; }
.controls-section { background: #f8f9fa; border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.toggle-container { display: flex; justify-content: center; margin-bottom: 24px; }
.toggle-switch { background: #e9ecef; border-radius: 40px; padding: 4px; display: inline-flex; cursor: pointer; }
.toggle-option { padding: 10px 24px; border-radius: 40px; transition: all 0.3s ease; font-weight: 600; color: #666; }
.toggle-option.active { background: #C06437; color: white; box-shadow: 0 4px 15px rgba(192, 100, 55, 0.4); }
.slider-group { margin-bottom: 24px; }
.slider-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.slider-label span { font-size: 0.88em; font-weight: 600; color: #666666; }
.input-group { display: flex; align-items: center; gap: 8px; }
.manual-input { width: 104px; padding: 6px 12px; border: 2px solid #dee2e6; border-radius: 8px; font-size: 0.88em; font-weight: 600; text-align: center; transition: all 0.3s ease; }
.manual-input:focus { outline: none; border-color: #6FA088; box-shadow: 0 0 0 3px rgba(111, 160, 136, 0.1); }
.slider-value { background: #C06437; color: white !important; padding: 6px 16px; border-radius: 16px; font-weight: 700; font-size: 0.88em; }
input[type="range"] { width: 100%; height: 6px; border-radius: 4px; background: #dee2e6; outline: none; -webkit-appearance: none !important; appearance: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #C06437; cursor: pointer; box-shadow: 0 2px 8px rgba(192, 100, 55, 0.5); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #C06437; cursor: pointer; border: none; box-shadow: 0 2px 8px rgba(192, 100, 55, 0.5); }
.results-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.price-card { background: white; border: 2px solid #e9ecef; border-radius: 12px; padding: 20px; transition: all 0.3s ease; position: relative; overflow: hidden; }
.price-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }
.price-card.lowest-price { background: #6FA088; border: 3px solid #6FA088; }
.price-card.lowest-price .company-name, .price-card.lowest-price .plan-name, .price-card.lowest-price .price, .price-card.lowest-price .price-period, .price-card.lowest-price .plan-details, .price-card.lowest-price .plan-details div { color: white !important; }
.price-card.tuyu { border: 2px solid #e9ecef; background: white; position: relative; }
.tuyu-logo { width: 80px; height: auto; position: absolute; top: 20px; right: 20px; }
.competitor-logo { width: 80px; height: auto; position: absolute; top: 20px; right: 20px; }
.sharefile-logo { width: 120px; }
.dropbox-logo { width: 64px; }
.company-name { font-size: 1.12em; font-weight: 700; margin-bottom: 4px; color: #666666; }
.price-card.tuyu .company-name { color: #C06437; }
.plan-name { font-size: 0.72em; color: #666666; margin-bottom: 12px; font-weight: 600; }
.price { font-size: 2em; font-weight: 700; color: #666666; margin-bottom: 4px; }
.price-card.tuyu .price { color: #C06437; }
.price-period { font-size: 0.72em; color: #666666; margin-bottom: 12px; }
.plan-details { font: 400 .7em/1em Inter; color: #666666; padding-top: 12px; border-top: 1px solid #e9ecef; }
.plan-details div { margin-bottom: 4px; }
@media (max-width: 768px) { .header h3.calc { font-size: 1.8em; } .calculator-content { padding: 16px; } .controls-section { padding: 16px; } .results-section { grid-template-columns: 1fr; } }