:root { --gap: 1rem; --panel:#12161b; --bg:#0b0d10; --ink:#e8eef6; }
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font:16px/1.5 system-ui, sans-serif; margin:0;}
.calc-shell{display:grid; grid-template-columns: 260px 1fr; min-height:100dvh;}
.calc-menu{padding:1rem; border-right:1px solid #222;}
.calc-menu h2{margin:.25rem 0 1rem; font-size:1.1rem; opacity:.85;}
.calc-menu ul{list-style:none; padding:0; margin:0; display:grid; gap:.5rem;}
.calc-menu a{display:block; padding:.5rem .75rem; border-radius:10px; text-decoration:none; color:inherit; background:#1a1f26;}
.calc-menu a:hover{outline:1px solid #2b3440;}
.calc-panel{padding:1.25rem; max-width:800px;}
form p{margin:.5rem 0;}
input, textarea{width:100%; padding:.5rem .6rem; border-radius:10px; border:1px solid #2b3440; background:#0f1318; color:var(--ink);}
button{padding:.6rem .9rem; border-radius:10px; border:0; background:#2b6cb0; color:white; cursor:pointer;}
button:hover{filter:brightness(1.1)}
.result{margin-top:1rem; padding:1rem; border:1px solid #2b3440; border-radius:12px; background:#10151b;}
.note{opacity:.85}


.calc-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem;
  background: #0f1318;
  border-bottom: 1px solid #2b3440;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  background: #1a1f26;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  transition: background 0.2s, transform 0.15s ease;
}

.back-btn:hover {
  background: #2b3440;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .calc-header {
    justify-content: center;
    padding: 0.75rem;
  }
  .back-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.95rem;
  }
}

/* Layout helpers */
.block { margin: 1rem 0; padding: 1rem; border:1px solid #2b3440; border-radius:12px; background:#10151b; }
.block legend { padding: 0 .4rem; opacity:.9; }
.inline-grid { display:grid; gap:.75rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid { display:grid; gap:.75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.cards { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { padding:1rem; border:1px solid #2b3440; border-radius:12px; background:#0f1318; }
.card h4 { margin:0 0 .35rem; font-size:1.05rem; }

dl { margin:.25rem 0; }
dt { font-size:.9rem; opacity:.75; }
dd { margin:0 0 .5rem; }

.help { font-size:.85rem; opacity:.75; margin:.25rem 0 .5rem; }
.muted { opacity:.85; }
.note { opacity:.8; font-style: italic; }

/* Badges */
.badge {
  display:inline-block; padding:.25rem .5rem; border-radius:999px;
  border:1px solid #2b3440; background:#121a23; font-weight:600;
}

/* Mobile form fields breathing room */
input, textarea { margin-top:.25rem; }