:root{
  --bg:#F7F7F7;
  --card:#FFFFFF;
  --border:#E3E3E3;
  --ink:#1C1C1C;
  --sub:#7A7A7A;
  --accent:#2F2F2F;
  --blue:#2F6FED;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:640px; margin:0 auto; padding:36px 20px 80px;}

header{margin-bottom:28px;}
h1{font-size:24px; font-weight:600; margin:0 0 6px; letter-spacing:-0.01em;}
p.sub{color:var(--sub); font-size:14px; margin:0; line-height:1.5;}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:16px;
}
.card h2{font-size:14px; font-weight:600; margin:0 0 16px; color:var(--ink);}

.field{margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
label{display:block; font-size:13px; color:var(--sub); margin-bottom:6px;}
input[type="number"], input[type="text"], select{
  width:100%;
  font-size:15px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-family:inherit;
}
input:focus, select:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(47,111,237,0.12);
}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A7A7A'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:32px;}

.row{display:flex; gap:10px;}
.row .field{flex:1;}

.seg{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:16px;
}
.seg button{
  font-family:inherit;
  font-size:13px;
  padding:8px 14px;
  background:#fff;
  border:none;
  cursor:pointer;
  color:var(--sub);
  border-right:1px solid var(--border);
}
.seg button:last-child{border-right:none;}
.seg button.active{background:var(--accent); color:#fff;}

.hint{font-size:12px; color:var(--sub); margin-top:6px; line-height:1.4;}

.advanced-toggle{
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--sub); cursor:pointer;
  padding:4px 0; user-select:none;
}
.advanced-toggle svg{transition:transform .15s;}
.advanced-toggle.open svg{transform:rotate(90deg);}
.advanced-body{display:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--border);}
.advanced-body.open{display:block;}

/* results */
.results{
  background:var(--accent);
  color:#fff;
  border-radius:var(--radius);
  padding:24px 22px;
}
.results .big{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; gap:16px; flex-wrap:wrap;}
.results .big .item{flex:1; min-width:130px;}
.results .big .num{font-size:32px; font-weight:600; letter-spacing:-0.02em; line-height:1;}
.results .big .lbl{font-size:12.5px; color:#B9B9B9; margin-top:6px;}
.results .flag{
  display:inline-block; font-size:11px; background:rgba(255,255,255,0.14);
  padding:2px 8px; border-radius:20px; margin-top:8px; color:#EDEDED;
}
.divider{height:1px; background:rgba(255,255,255,0.14); margin:16px 0;}
.results .line{display:flex; justify-content:space-between; font-size:13px; padding:5px 0; color:#D6D6D6;}
.results .line b{color:#fff; font-weight:500;}

.note{
  font-size:12px;
  color:var(--sub);
  margin-top:18px;
  line-height:1.5;
  text-align:center;
}