#fraction-calculator-wrapper {
    width: 100%;
    max-width: 700px;
    margin: 20px auto;
    font-family: 'Segoe UI', sans-serif;
    box-sizing: border-box;
    background: linear-gradient(135deg, #1e272e, #000);
    border-radius: 20px;
    padding: 25px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

#fraction-calculator-wrapper * { box-sizing: border-box; }

#fraction-calculator-wrapper h2 {
    color: #fff !important;
    text-align: center;
    margin-bottom: 25px;
    font-size: 2rem;
    line-height: 1.2;
}

#fraction-calculator-wrapper h2 span { color: #00d2d3; }

.ft-calc-section {
     margin-bottom: 25px;
     padding: 20px;
     border: 1px solid #333;
     border-radius: 15px;
     background-color: #1a1a1a;
}

.ft-section-header { 
    color: #fff !important; 
    text-align: center; 
    margin-bottom: 15px; 
    font-size: 1.2rem; 
    font-weight: 600;
}
.ft-section-header span { color: #00d2d3; }

.ft-calc-row { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 15px; 
    margin-bottom: 15px; 
    flex-wrap: wrap; 
}

.ft-fraction-group { display: flex; flex-direction: column; align-items: center; width: 85px; }
.ft-mixed-group { display: flex; align-items: center; gap: 8px; }

#fraction-calculator-wrapper input[type="number"] {
    width: 100% !important; 
    height: 45px !important; 
    background: #222 !important; 
    border: 1px solid #444 !important;
    color: #fff !important; 
    font-size: 1rem !important; 
    text-align: center !important; 
    border-radius: 8px !important; 
    outline: none !important; 
    padding: 5px !important;
    box-shadow: none !important;
}

#fraction-calculator-wrapper input[type="number"]:focus { border-color: #00d2d3 !important; }

.ft-bar { width: 100%; height: 2px; background: #fff; margin: 5px 0; }

#fraction-calculator-wrapper select { 
    padding: 10px !important; 
    font-size: 1.2rem !important; 
    background: #333 !important; 
    color: #00d2d3 !important; 
    border: 1px solid #444 !important; 
    border-radius: 8px !important; 
    cursor: pointer !important;
}

.ft-action-group { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; }

.ft-btn-action, .ft-btn-reset { 
    flex: 1; padding: 14px; border: none; border-radius: 10px; font-weight: bold; 
    cursor: pointer; font-size: 1rem; transition: 0.3s; min-width: 140px;
}
.ft-btn-action { background: #00d2d3; color: #000 !important; }
.ft-btn-action:hover { background: #01a3a4; }
.ft-btn-reset { background: #444; color: #ddd !important; }
.ft-btn-reset:hover { background: #666; }

.ft-result-box {
    margin-top: 20px; background: #252525; padding: 15px; border-radius: 12px;
    text-align: center; border: 1px solid #444; display: none;
}

.ft-res-val { 
    color: #fff; font-size: 1.6rem; font-weight: bold; margin-top: 10px; 
    display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;
}

.ft-v-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; }
.ft-v-num { border-bottom: 2px solid #fff; padding-bottom: 2px; display: block; width: 100%; }
.ft-v-den { padding-top: 2px; display: block; width: 100%; }
.ft-v-whole { font-size: 1.8rem; margin-right: 8px; display: inline-block; vertical-align: middle; }
.ft-sub-info { font-size: 0.95rem; color: #00d2d3; margin-top: 10px; }

@media (max-width: 480px) {
    #fraction-calculator-wrapper { padding: 15px; }
    .ft-calc-row { gap: 8px; }
    .ft-mixed-group { flex-direction: row; gap: 5px; }
    .ft-fraction-group { width: 70px; }
}