:root{
  --primary:#00b894;
  --muted:#6b7280;
  --bg:#f9fafb;
  --card:#ffffff;
  --danger:#ef4444;
  --profit:#16a34a;
  --warn:#f59e0b;
  --font: 'Inter', sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:#0f172a;
  padding:20px;
  display:flex;
  justify-content:center;
}
.container{
  max-width: 90%;
  width: 100%;
  margin: 20px 0;
    
}

/* card wrapper: calculator (left) + results (right) */
.card-wrapper{
  display:flex;
  gap:18px;
  align-items:flex-start;
  flex-wrap:wrap;
}

/* cards */
.card{
  background:var(--card);
  border-radius:2px;
  box-shadow:0 8px 20px rgba(2,6,23,0.06);
  padding:20px;
}

/* panels */
.panel.inputs{flex:1 1 560px; min-width:280px}
.panel.results{flex:0 0 360px; min-width:280px}

/* headings */
h1{font-size:18px;color:var(--primary);margin-bottom:12px;font-weight:700}

/* form rows */
.row{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.col{flex:1;min-width:140px}

/* inputs */
label{display:block;font-weight:600;color:var(--muted);margin-bottom:6px;font-size:13px}
input[type=number], input[type=text], select{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #e6eef6;
  font-size:14px;
  background:transparent;
}

/* actions */
.row.actions{display:flex;gap:12px;margin-top:8px}
button{
  padding:10px 14px;border-radius:8px;border:none;font-weight:700;cursor:pointer;background:var(--primary);color:#fff;
}
button.muted{background:#b2bec3;color:#0f172a}

/* results grid */
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.res-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f1f5f9}
.res-item.full{grid-column:1/-1}
.res-item .label{color:var(--muted);font-weight:600}
.value{font-weight:800}
.strength{padding:6px 10px;border-radius:8px;display:inline-block}

/* history */
.history-card{margin-top:18px;padding:16px}
.table-wrapper{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:1000px}
th, td{padding:10px 12px;border-bottom:1px solid #e6eef6;text-align:center;font-size:13px}
th{background:#f5f7fa;font-weight:700}

/* colors */
.strong{color:var(--profit);font-weight:800}
.average{color:var(--warn);font-weight:800}
.poor{color:var(--danger);font-weight:800}

/* responsive */
@media(max-width:1000px){
  .card-wrapper{flex-direction:column}
  .panel.results{order:2}
}


/* responsive */
@media(max-width:768px){
.panel.results {
  flex: 1;
  min-width: 100%;
}
}