:root {
  --bg: #07120f;
  --surface: #0d1d18;
  --surface-2: #132821;
  --line: rgba(255,255,255,.10);
  --text: #f4fbf8;
  --muted: #a9bbb4;
  --brand: #35d38a;
  --brand-dark: #117448;
  --warning: #f5b942;
  --danger: #ff6b6b;
  --info: #67b7ff;
  --radius: 20px;
  --shadow: 0 20px 50px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% -10%, rgba(53,211,138,.20), transparent 35rem),
    radial-gradient(circle at 100% 30%, rgba(37,117,85,.17), transparent 30rem),
    var(--bg);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 14px clamp(18px,4vw,64px);
  border-bottom: 1px solid var(--line);
  background: rgba(7,18,15,.88); backdrop-filter: blur(18px);
}
.brand { display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand-mark {
  display:grid; place-items:center; width:42px; height:42px;
  border-radius:14px; background:var(--brand); color:#052c1c; font-weight:900;
}
.brand span:last-child { display:grid; line-height:1.1; }
.brand small { color:var(--muted); margin-top:4px; }
nav { display:flex; gap:8px; }
.nav-btn, .ghost-btn, .secondary-btn, .primary-btn, .icon-btn {
  border:0; border-radius:12px; padding:11px 15px; font-weight:750;
}
.nav-btn, .ghost-btn, .secondary-btn { color:var(--text); background:transparent; border:1px solid var(--line); }
.nav-btn.active { background:var(--surface-2); color:var(--brand); }
.primary-btn { background:var(--brand); color:#052c1c; box-shadow:0 10px 24px rgba(53,211,138,.18); }
.primary-btn:hover { filter:brightness(1.05); }
.secondary-btn:hover, .nav-btn:hover, .ghost-btn:hover { border-color:rgba(53,211,138,.5); }
.shell { width:min(1180px, calc(100% - 32px)); margin:auto; }
.hero {
  display:flex; justify-content:space-between; gap:36px; align-items:end;
  padding:70px 0 40px;
}
.eyebrow { margin:0 0 10px; color:var(--brand); text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:850; }
h1 { margin:0; max-width:780px; font-size:clamp(2.25rem,6vw,4.7rem); line-height:.98; letter-spacing:-.055em; }
.hero-copy { max-width:700px; color:var(--muted); font-size:1.05rem; line-height:1.7; }
.status-card {
  min-width:245px; display:flex; align-items:center; gap:12px; padding:16px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
}
.status-card div { display:grid; gap:3px; }
.status-card small { color:var(--muted); }
.status-dot { width:12px; height:12px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 7px rgba(53,211,138,.12); }
.view { display:none; padding:24px 0 60px; }
.view.active { display:block; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
h2 { margin:0; font-size:clamp(1.7rem,4vw,2.5rem); letter-spacing:-.035em; }
h3 { margin:0; }
.member-count, .badge { color:var(--brand); border:1px solid rgba(53,211,138,.25); background:rgba(53,211,138,.08); border-radius:999px; padding:7px 10px; font-size:.8rem; font-weight:800; }
.notice { margin:16px 0 22px; padding:15px 17px; border-radius:14px; border:1px solid; line-height:1.55; }
.notice.info { color:#cfe9ff; background:rgba(103,183,255,.08); border-color:rgba(103,183,255,.3); }
.notice.warning { color:#ffe5a5; background:rgba(245,185,66,.08); border-color:rgba(245,185,66,.3); }
.notice.danger { color:#ffd1d1; background:rgba(255,107,107,.08); border-color:rgba(255,107,107,.3); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.metric-card, .panel, .signup-form, .rule-card {
  background:linear-gradient(180deg, rgba(19,40,33,.92), rgba(13,29,24,.95));
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.metric-card { padding:20px; min-height:150px; display:flex; flex-direction:column; }
.metric-card span, .metric-card small { color:var(--muted); }
.metric-card strong { margin:auto 0 8px; font-size:1.75rem; letter-spacing:-.04em; }
.dashboard-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; margin-top:18px; }
.panel { padding:22px; }
.panel-title { display:flex; justify-content:space-between; gap:14px; margin-bottom:20px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid.two { grid-template-columns:1fr 1fr; }
label { display:grid; gap:8px; color:#dbe7e2; font-size:.92rem; font-weight:700; }
input, select {
  width:100%; color:var(--text); background:#091712;
  border:1px solid var(--line); border-radius:12px; padding:13px 14px; outline:none;
}
input:focus, select:focus { border-color:var(--brand); box-shadow:0 0 0 4px rgba(53,211,138,.10); }
.full { grid-column:1/-1; }
.result-box { margin-top:16px; padding:14px 16px; border-radius:12px; line-height:1.5; border:1px solid var(--line); }
.result-box.neutral { color:var(--muted); background:rgba(255,255,255,.03); }
.result-box.success { color:#c9ffe4; background:rgba(53,211,138,.08); border-color:rgba(53,211,138,.3); }
.result-box.error { color:#ffd1d1; background:rgba(255,107,107,.08); border-color:rgba(255,107,107,.3); }
.allocation { display:grid; gap:24px; margin:12px 0 24px; }
.allocation-row > div:first-child { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px; }
.allocation-row strong { font-size:1.7rem; }
.allocation-row span { color:var(--muted); }
.bar { height:12px; background:#08130f; border-radius:999px; overflow:hidden; border:1px solid var(--line); }
.bar span { display:block; height:100%; background:var(--brand); border-radius:inherit; }
.bar.reserve span { background:var(--warning); }
.simple-list { margin:0; padding-left:20px; color:var(--muted); line-height:1.7; }
.signup-form { padding:clamp(20px,4vw,32px); }
fieldset { border:0; padding:0; margin:0 0 30px; }
legend { width:100%; font-size:1.12rem; font-weight:850; padding:0 0 14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.checkbox-row { grid-template-columns:22px 1fr; align-items:start; margin:14px 0; font-weight:550; color:#d4e2dc; line-height:1.55; }
.checkbox-row input { width:18px; height:18px; margin-top:3px; accent-color:var(--brand); }
.field-help { color:var(--muted); font-size:.84rem; line-height:1.55; }
.rules-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.rule-card { padding:20px; }
.rule-card > span { color:var(--brand); font-weight:900; font-size:.82rem; }
.rule-card h3 { margin:28px 0 10px; }
.rule-card p { margin:0; color:var(--muted); line-height:1.65; }
dialog {
  width:min(440px, calc(100% - 30px)); color:var(--text); background:var(--surface);
  border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow);
}
dialog::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(5px); }
.dialog-head, .dialog-actions { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.dialog-head { margin-bottom:22px; }
.dialog-actions { margin-top:22px; justify-content:flex-end; }
.icon-btn { width:38px; height:38px; padding:0; color:var(--text); background:transparent; border:1px solid var(--line); font-size:1.4rem; }
footer { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:26px 0 42px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; display:flex; justify-content:space-between; gap:24px; }
@media (max-width: 900px) {
  .topbar { flex-wrap:wrap; }
  nav { order:3; width:100%; overflow:auto; }
  .nav-btn { white-space:nowrap; }
  .hero { align-items:start; flex-direction:column; padding-top:45px; }
  .metrics { grid-template-columns:1fr 1fr; }
  .dashboard-grid { grid-template-columns:1fr; }
  .rules-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 580px) {
  .shell { width:min(100% - 22px, 1180px); }
  .topbar { padding:12px; gap:10px; }
  .brand small { display:none; }
  .ghost-btn { padding:9px 12px; }
  .hero { padding:34px 0 20px; }
  .status-card { width:100%; }
  .section-heading { align-items:start; flex-direction:column; }
  .metrics, .form-grid, .form-grid.two, .rules-grid { grid-template-columns:1fr; }
  footer { flex-direction:column; padding-bottom:28px; }
}

.conditional-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px; border:1px solid rgba(53,211,138,.22); background:rgba(53,211,138,.045); border-radius:14px; }
.conditional-fields[hidden], label[hidden], p[hidden] { display:none !important; }
@media (max-width:580px){ .conditional-fields { grid-template-columns:1fr; } }
.input-currency-label { color: var(--brand); font-weight: 850; }
.conversion-preview {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(53,211,138,.35);
  background: rgba(53,211,138,.06);
  color: #c9ffe4;
  font-size: .88rem;
  line-height: 1.5;
}
.metric-card small { line-height: 1.45; }
.currency-mode-card {
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  min-height:78px; padding:13px 14px; border:1px solid var(--line);
  border-radius:12px; background:#091712;
}
.currency-mode-card span,.currency-mode-card small { color:var(--muted); }
.currency-mode-card strong { color:var(--brand); font-size:1.25rem; }
.compact-checkbox { align-self:end; margin:0; min-height:78px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#091712; }
.secondary-currency.is-hidden { display:none; }