/* ========================================
   PLANETARY GEAR SIMULATOR - ISOLATED CSS
   All styles scoped to #planetary-gear-app
   ======================================== */

#planetary-gear-app {
    display: block !important;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative !important;
}

#planetary-gear-app *,
#planetary-gear-app *::before,
#planetary-gear-app *::after {
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/* Reset common elements */
#planetary-gear-app div,
#planetary-gear-app span,
#planetary-gear-app section,
#planetary-gear-app label,
#planetary-gear-app input,
#planetary-gear-app button,
#planetary-gear-app canvas,
#planetary-gear-app a {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

#planetary-gear-app input,
#planetary-gear-app button,
#planetary-gear-app select {
    font-family: inherit !important;
    font-size: inherit !important;
}

#planetary-gear-app {margin: 0 !important; padding: 0 !important; }#planetary-gear-app .simulator-section {max-width: 900px !important; margin: 40px auto !important; padding: 30px !important; background-color: #ffffff !important; border-radius: 8px !important; margin-top: -20px !important; margin-bottom: -20px !important; }#planetary-gear-app .input-group {display: flex !important; align-items: center !important; margin-bottom: 8px !important; }#planetary-gear-app div.windowMessage {border: 1px solid #000000 !important; padding: 10px !important; background-color: #ffffff !important; width: 700px !important; display: none !important; }#planetary-gear-app .pulse-animation {animation-name: pulse !important; animation-duration: 1s !important; animation-timing-function: linear !important; }

@#planetary-gear-app keyframes pulse {#planetary-gear-app 0% {background-color: #ffffff !important; }#planetary-gear-app 50% {background-color: #73afb9a6 !important; }#planetary-gear-app 100% {background-color: #ffffff !important; }
}#planetary-gear-app .color-sun, #planetary-gear-app .color-planet, #planetary-gear-app .color-ring {display: inline-block !important; width: 155px !important; margin-right: 10px !important; text-align: right !important; white-space: nowrap !important; }#planetary-gear-app #label-fixsun, #planetary-gear-app #label-fixcarrier, #planetary-gear-app #label-fixring {display: inline-block !important; width: 100px !important; margin-right: 5px !important; margin-left: 5px !important; text-align: left !important; white-space: nowrap !important; }#planetary-gear-app .color-sun {background-color: rgba(201, 240, 15, 0.5) !important; color: #000000 !important; border: 1px solid #000000 !important; }#planetary-gear-app .color-planet {background-color: rgba(0, 0, 255, 0.5) !important; color: #000000 !important; border: 1px solid #000000 !important; }#planetary-gear-app .color-ring {background-color: rgba(23, 23, 21, 0.5) !important; color: #000000 !important; border: 1px solid #000000 !important; }#planetary-gear-app .nplanets {margin-left: 20px !important; }#planetary-gear-app .input-box {color: #000000 !important; border: 1px solid #000000 !important; width: 70px !important; text-align: left !important; margin-right: 5px !important; padding-left: 4px !important; }#planetary-gear-app #module, #planetary-gear-app #planets {margin-left: 10px !important; margin-right: 10px !important; }#planetary-gear-app .dropdown {position: relative !important; display: inline-block !important; }#planetary-gear-app .dropbtn {background-color: #3a5a80 !important; color: white !important; padding: 12px 20px !important; font-size: 14px !important; font-weight: 500 !important; border: 1px solid #2a4a70 !important; border-radius: 4px !important; cursor: pointer !important; min-width: 180px !important; text-align: left !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; transition:
    background-color 0.2s,
    box-shadow 0.2s !important; }#planetary-gear-app .dropbtn:hover {background-color: #4a6a90 !important; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important; }#planetary-gear-app .dropdown-content {display: none !important; position: absolute !important; background-color: #ffffff !important; min-width: 180px !important; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2) !important; z-index: 10 !important; border-radius: 4px !important; border: 1px solid #ddd !important; margin-top: 2px !important; }#planetary-gear-app .dropdown-content a {color: #333 !important; padding: 12px 16px !important; text-decoration: none !important; display: block !important; transition: background-color 0.2s !important; }#planetary-gear-app .dropdown-content a:hover {background-color: #f0f4f8 !important; }#planetary-gear-app .dropdown:hover .dropdown-content {display: block !important; }#planetary-gear-app .dropdown-trigger::after {content: " \25BC" !important; font-size: 10px !important; color: white !important; float: right !important; margin-left: 10px !important; }#planetary-gear-app .output-boxes {margin-top: 10px !important; clear: both !important; }#planetary-gear-app .output-box {display: flex !important; align-items: center !important; border: 1px solid #000 !important; padding: 1px !important; margin-right: 10px !important; margin-bottom: 5px !important; padding-bottom: 2px !important; padding-top: 2px !important; }#planetary-gear-app .output-boxes > div {padding: 1px !important; margin-bottom: 5px !important; }#planetary-gear-app .output-container {display: flex !important; align-items: center !important; }#planetary-gear-app .output-label {display: flex !important; width: 200px !important; white-space: nowrap !important; }#planetary-gear-app .dropdown-container > * {margin-bottom: 30px !important; }#planetary-gear-app .dynamic-content {color: blue !important; background-color: #f0f0f0 !important; font-weight: bold !important; padding: 2px !important; width: 65px !important; }#planetary-gear-app .info-icon {cursor: pointer !important; color: #007bff !important; font-size: 18px !important; display: inline-block !important; width: 24px !important; height: 24px !important; background-color: #f0f0f0 !important; border-radius: 50% !important; text-align: center !important; line-height: 24px !important; }#planetary-gear-app .tooltip {position: relative !important; }#planetary-gear-app .tooltiptext {visibility: hidden !important; background-color: white !important; border: 2px solid #555 !important; color: #333 !important; text-align: center !important; border-radius: 6px !important; padding: 5px !important; position: absolute !important; z-index: 100 !important; opacity: 0 !important; transition: opacity 0.3s !important; bottom: 100% !important; left: 50% !important; transform: translateX(-50%) !important; margin-bottom: 10px !important; }#planetary-gear-app .tooltip:hover .tooltiptext {visibility: visible !important; opacity: 1 !important; }#planetary-gear-app span.tooltiptext {width: 300px !important; }#planetary-gear-app .tooltipimg {width: 280px !important; }#planetary-gear-app .tooltip-left .tooltiptext {bottom: auto !important; top: 100% !important; left: auto !important; right: -50px !important; transform: none !important; margin-top: 10px !important; margin-bottom: 0 !important; }#planetary-gear-app .fixed-gear {background-color: gray !important; }#planetary-gear-app .divider {display: inline-block !important; width: 10px !important; font-family: Arial !important; }#planetary-gear-app .download-buttons {display: flex !important; gap: 10px !important; margin-top: 15px !important; }#planetary-gear-app .download-btn {background-color: #3a5a80 !important; color: white !important; padding: 10px 16px !important; font-size: 14px !important; font-weight: 500 !important; border: 1px solid #2a4a70 !important; border-radius: 4px !important; cursor: pointer !important; transition:
    background-color 0.2s,
    box-shadow 0.2s !important; }#planetary-gear-app .download-btn:hover {background-color: #4a6a90 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; }#planetary-gear-app .tooltip-text-only {width: auto !important; max-width: 220px !important; min-height: auto !important; height: auto !important; font-size: 12px !important; color: #333 !important; background-color: white !important; padding: 8px 12px !important; white-space: normal !important; line-height: 1.4 !important; }#planetary-gear-app .modal {display: none !important; position: fixed !important; z-index: 1000 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; background-color: rgba(0, 0, 0, 0.5) !important; justify-content: center !important; align-items: center !important; }#planetary-gear-app .modal-content {background-color: #ffffff !important; padding: 30px !important; border-radius: 8px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; max-width: 400px !important; width: 90% !important; position: relative !important; }#planetary-gear-app .modal-content h3 {margin-top: 0 !important; margin-bottom: 20px !important; color: #333 !important; font-size: 18px !important; }#planetary-gear-app .modal-close {position: absolute !important; top: 10px !important; right: 15px !important; font-size: 28px !important; font-weight: bold !important; color: #aaa !important; cursor: pointer !important; transition: color 0.2s !important; }#planetary-gear-app .modal-close:hover {color: #333 !important; }#planetary-gear-app .modal-options {display: flex !important; flex-direction: column !important; gap: 15px !important; margin-bottom: 25px !important; }#planetary-gear-app .radio-option {display: flex !important; align-items: center !important; gap: 10px !important; cursor: pointer !important; font-size: 14px !important; color: #333 !important; }#planetary-gear-app .radio-option input[type="radio"] {width: 18px !important; height: 18px !important; cursor: pointer !important; }#planetary-gear-app #modal-download-btn {width: 100% !important; padding: 12px !important; font-size: 16px !important; }#planetary-gear-app .modal-parameters {display: flex !important; flex-direction: column !important; gap: 12px !important; margin-bottom: 20px !important; padding-top: 15px !important; border-top: 1px solid #e0e0e0 !important; }#planetary-gear-app .param-row {display: flex !important; align-items: center !important; gap: 10px !important; }#planetary-gear-app .param-row label {font-size: 14px !important; color: #333 !important; min-width: 120px !important; }#planetary-gear-app .param-input {width: 80px !important; padding: 8px 10px !important; font-size: 14px !important; border: 1px solid #ccc !important; text-align: right !important; }#planetary-gear-app .param-input:focus {outline: none !important; border-color: #3a5a80 !important; box-shadow: 0 0 3px rgba(58, 90, 128, 0.3) !important; }#planetary-gear-app .param-tooltip {font-size: 14px !important; width: 20px !important; height: 20px !important; line-height: 20px !important; }