:root{
  --bg:#e6e6e6;
  --panel:#f2f2f2;
  --border:#bdbdbd;
  --text:#222;
  --placeholder:#777;
  --focus:#888;

  --pad:18px;
  --gap:14px;

  --r-panel:10px;
  --r:7px;

  --shadow:0 6px 14px rgba(0,0,0,0.06);

  --ui:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace;
}

/* base */
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ui);
}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--pad);
  overflow:hidden;
}

/* home arrow */
.nav-home{
  position:fixed;
  top:12px;
  left:10px;
  color:#444;
  opacity:.3;
}
.nav-home:hover{opacity:1;color:#444}

/* layout */
.layout{
  width:100%;
  max-width:1120px;
  display:flex;
  align-items:flex-start;
  gap:var(--gap);
  max-height:calc(100vh - (2 * var(--pad)));
}

/* panels */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-panel);
  padding:18px;
  box-shadow:var(--shadow);
  min-width:0;
}

.panel-help{
  width:320px;
  max-height:100%;
  overflow:auto;
}
.panel-calc{
  flex:1;
  max-height:100%;
}
.panel-vars{
  width:320px;
  max-height:100%;
  overflow:auto;
}

/* responsive */
@media (max-width:1100px){
  body{overflow:auto}
  .layout{
    flex-direction:column;
    max-height:none;
  }
  .panel-help,.panel-vars{width:auto}
}

/* header row */
.top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:12px;
}
.title{font-size:18px;font-weight:450}
.mode{font-size:13px;color:#666;font-weight:400;margin-left:8px}

.tools{
  display:flex;
  align-items:center;
  gap:10px;
}

/* buttons */
.btn{
  border:1px solid var(--border);
  background:#f7f7f7;
  border-radius:var(--r);
  padding:5px 9px;
  font-size:12px;
  color:#333;
  cursor:pointer;
  user-select:none;
}
.btn:hover{border-color:var(--focus);background:#fff}
.btn:active{transform:translateY(1px)}
.btn.on{border-color:#81c784;background:#e8f5e9;color:#1b5e20}

/* mode buttons: stable width + monospace */
.tools .btn{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  min-width:56px;
  text-align:center;
}

/* textarea */
.expr{
  width:100%;
  font-family:var(--mono);
  font-size:18px;
  line-height:1.35;

  padding:12px 14px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fafafa;
  color:var(--text);
  outline:none;

  resize:none;
  overflow:auto;
  max-height:180px;
  white-space:pre-wrap;
}
.expr::placeholder{color:var(--placeholder)}
.expr:focus{border-color:var(--focus);background:#fff}

textarea.expr::-webkit-resizer{display:none}

/* result */
.result-row{
  margin-top:12px;
  display:flex;
  align-items:stretch;
  gap:10px;
}
.result{
  flex:1;
  min-height:22px;

  padding:10px 14px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#f7f7f7;

  font-family:var(--mono);
  font-size:24px;

  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:pre-wrap;
}
.result.ok{color:var(--text)}
.result.err{color:#7f0000;background:#fdecea;border-color:#e57373}

.clip{
  width:44px;
  border:1px solid var(--border);
  background:#f7f7f7;
  border-radius:var(--r);
  display:grid;
  place-items:center;
  cursor:pointer;
  color:#444;
}
.clip:hover{border-color:var(--focus);background:#fff}
.clip:active{transform:translateY(1px)}
.clip:disabled{
  opacity:.45;
  cursor:default;
}
.clip:disabled:hover{
  border-color:var(--border);
  background:#f7f7f7;
}
.clip:disabled:active{transform:none}

.expr{
  height:48px;
  max-height:48px;
  overflow:hidden;
}

.expr{
  resize:none !important;
}

textarea.expr::-webkit-resizer{display:none}