:root{
  --bg:#f7fbff;
  --card:#ffffff;
  --accent:#0b63d6;
  --muted:#6b7c93;
  --radius:12px;
  --shadow:0 6px 18px rgba(12,40,80,0.08);
  font-family:'Inter',sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#102033;
  line-height:1.35;
}

.wrapper{max-width:1100px;margin:28px auto;padding:16px}

.hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.brand{display:flex;gap:14px;align-items:center}
.logo{
  width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),#0099ff);
  display:flex;justify-content:center;align-items:center;
  color:#fff;font-size:20px;
}
.title{font-weight:600;font-size:18px}
.subtitle{font-size:13px;color:var(--muted)}

.meta{font-size:13px;color:var(--muted)}

.main{display:flex;gap:20px}
.panel{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}
.left{flex:0.55}
.right{flex:0.45}

h2,h3{margin:0 0 12px;font-weight:600}

.label{font-size:13px;color:var(--muted);margin-top:12px}
input,select{
  width:100%;padding:12px;margin-top:6px;
  border-radius:8px;border:1px solid #dce6f7;
  background:#fff;font-size:15px;
}
input:focus,select:focus{border-color:var(--accent)}

.row{display:flex;gap:12px;margin-top:10px}
.field{flex:1}

.actions{display:flex;gap:12px;margin-top:14px}
.btn{
  padding:12px;border:none;border-radius:8px;
  cursor:pointer;font-weight:600;font-size:15px;
}
.primary{background:var(--accent);color:#fff;flex:1}
.alt{background:#eef4ff;color:var(--accent);width:120px}

.result-box{
  background:#eef5ff;border-radius:10px;
  border:1px solid #dce9ff;
  padding:14px;margin-top:18px;
  display:flex;justify-content:space-between;align-items:center;
}
.result-text{font-size:16px}
.result-controls{display:flex;gap:8px}
.icon-btn{
  background:#fff;border:1px solid #dce6f7;
  padding:8px 10px;border-radius:8px;cursor:pointer;
}

.note{margin-top:12px;font-size:12px;color:var(--muted)}

.history{
  list-style:none;padding:0;margin:10px 0;max-height:250px;overflow:auto;
}
.history li{
  padding:10px;background:#f8fbff;border-radius:8px;
  border:1px solid #e6eef9;margin-bottom:8px;
  display:flex;justify-content:space-between;
}

.chart-card{
  margin-top:12px;padding:10px;border-radius:10px;
  background:#f8fbff;border:1px solid #e6eef9;height:180px;
}

.ftr{
  display:flex;justify-content:space-between;margin-top:20px;
  font-size:13px;color:var(--muted);
}
.small{font-size:12px}

@media(max-width:900px){
  .main{flex-direction:column}
  .actions{flex-direction:column}
  .alt{width:100%}
}