.ssmc-wrapper {
  display: flex; flex-wrap: wrap; font-family: sans-serif;
}
.ssmc-sidebar { width: 220px; background: #1e1e2f; color: #fff; padding: 20px; transition: all .3s; }
.ssmc-toggle { display: none; cursor: pointer; margin-bottom: 10px; background:#333;padding:10px;text-align:center;border-radius:5px;}
.calculator-sidebar { list-style: none; padding: 0; margin: 0; }
.calculator-item { padding: 12px 10px; margin-bottom: 5px; cursor: pointer; border-radius: 5px; transition: all .2s; }
.calculator-item.active, .calculator-item:hover { background: #ff5722; color: #fff; }
input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea {
  border: 1px solid #666;
  border-radius: 3px;
  padding: .5rem 1rem !important;
  transition: all .3s;
  width: 100%;
  height: 50px;
  margin: 5px 0 20px !important;
  background: #fff;
  font-weight: normal;
}
.ssmc-content { flex: 1; padding: 35px;
  background: #fff; }
.ssmc-box { display: none; animation: fadeIn 0.3s ease; }
.ssmc-box.active-box { display: block; }

.ssmc-result-box { padding: 15px; border-radius: 10px; margin-top: 15px; background: #f7f7f7; position: relative; overflow: hidden; }
.result-badge { position: absolute; top: 14px; right: 14px; background: #ff5722; color: #fff; padding: 5px 10px; border-radius: 50px; font-size: 12px; animation: pop 0.5s ease; }
.ssmc-loader { width: 40px; height: 40px; border: 4px solid #ddd; border-top-color: #ff5722; border-radius: 50%; animation: spin 1s linear infinite; margin: 20px auto; display: none; }

.ssmc-history { width: 250px; background: #f3f3f3; padding: 15px; border-left: 1px solid #ccc; }
.ssmc-history h4 { margin-top:0; font-size:16px; font-weight:bold; }
.history-list { list-style:none; padding:0; max-height:300px; overflow-y:auto; }
.history-list li { padding:5px 0; border-bottom:1px solid #e0e0e0; font-size:14px; }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes pop { 0% {transform:scale(0);} 70% {transform:scale(1.2);} 100% {transform:scale(1);} }
@keyframes spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }

@media(max-width:992px){
  .ssmc-wrapper { flex-direction: column; }
  .ssmc-sidebar.open { display:block; }
  .ssmc-history { width: 100%; margin-top:20px; }
  .ssmc-toggle { display:block; }
  .ssmc-wrapper {
    flex-direction: column;
  }

  .ssmc-sidebar {
    width: 100%;
    position: relative;
    transform: none !important;
  }

  .ssmc-content {
    width: 100%;
  }
}
.ssmc-history {
  width: 250px; background: #f7f7f7; padding: 15px; border-left: 1px solid #ccc; border-radius: 0 10px 10px 0;
}