:root{
  --bg:#182617;
  --bg-grid: rgba(140,180,110,0.06);
  --panel:#1f321d;
  --panel-2:#182617;
  --line:#3a5432;
  --ink:#eef5e6;
  --ink-dim:#a3bd94;
  --accent:#8bc34a;
  --accent-2:#d4a544;
  --ok:#7fd88f;
  --bad:#ff8a7a;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px) 0 0/24px 24px,
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  min-height:100vh;
}
.topbar{ padding:20px 28px 14px; border-bottom:1px solid var(--line); }
.topbar-title{ font-size:22px; font-weight:700; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.topbar-sub{ font-size:13px; font-weight:400; color:var(--ink-dim); }

.tabs{ display:flex; gap:8px; padding:14px 28px 0; }
.tab{
  background:var(--panel-2); border:1px solid var(--line); border-bottom:none;
  color:var(--ink-dim); padding:10px 18px; border-radius:10px 10px 0 0;
  cursor:pointer; font-size:14px; font-weight:600;
}
.tab.is-active{ background:var(--panel); color:var(--ink); border-color:var(--accent); }

.wrap{ max-width:1100px; margin:0 auto; padding:0 28px 40px; }
.tab-panel{ display:none; background:var(--panel); border:1px solid var(--line); border-radius:0 10px 10px 10px; padding:24px; }
.tab-panel.is-active{ display:block; }

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width: 860px){ .grid{ grid-template-columns:1fr; } }

.panel h2{ margin-top:0; font-size:16px; letter-spacing:.02em; color:var(--accent); }
.panel h3{ font-size:14px; color:var(--ink-dim); margin:18px 0 8px; }

label{ display:block; font-size:12.5px; color:var(--ink-dim); margin:12px 0 4px; }

.mode-switch{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
#crop-mode-switch{ grid-template-columns:repeat(2, 1fr); }
.mode-btn{
  background:var(--panel-2); border:1.5px solid var(--line); color:var(--ink-dim);
  border-radius:9px; padding:10px 10px; font-size:13px; font-weight:700; cursor:pointer;
  text-align:center; line-height:1.3;
}
.mode-btn span{ display:block; font-size:11px; font-weight:400; margin-top:3px; color:var(--ink-dim); }
.mode-btn.is-active{ border-color:var(--accent); color:var(--accent); background:rgba(139,195,74,0.08); }
.mode-btn.is-active span{ color:var(--ink); }
@media (max-width: 640px){ .mode-switch{ grid-template-columns:1fr; } }

.hint-static{ font-size:12px; color:var(--ink-dim); margin:6px 0 10px; }
input, select{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:9px 10px; font-size:14px; font-family:var(--sans);
}
input:focus, select:focus{ outline:none; border-color:var(--accent); }

.row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 480px){ .row{ grid-template-columns:1fr; } }

.mode-block{ margin-top:6px; }
.feed-type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.feed-type-grid label{ margin:0 0 2px; font-size:12px; }

.econ-details{ margin-top:16px; border:1px solid var(--line); border-radius:8px; padding:10px 14px; }
.econ-details summary{ cursor:pointer; font-size:13.5px; color:var(--accent-2); font-weight:600; }

.actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.btn{
  background:linear-gradient(135deg, var(--accent), #6ea83a); color:#0f1a0d; border:none;
  padding:11px 20px; border-radius:8px; font-weight:700; cursor:pointer; font-size:14px;
}
.btn:hover{ filter:brightness(1.08); }
.btn--ghost{ background:transparent; color:var(--accent-2); border:1px solid var(--accent-2); }

.hint{ color:var(--bad); font-size:13px; min-height:1.2em; margin-top:10px; }

.result{ color:var(--ink-dim); font-size:14px; }
.result table{ width:100%; border-collapse:collapse; margin:10px 0 18px; font-family:var(--mono); font-size:13px; }
.result th, .result td{ border:1px solid var(--line); padding:7px 10px; text-align:left; }
.result th{ background:var(--panel-2); color:var(--accent); }
.result h4{ color:var(--ink); font-size:13.5px; margin:16px 0 4px; text-transform:uppercase; letter-spacing:.04em; }
.result .headline{ color:var(--ink); font-size:18px; font-weight:700; margin:4px 0 14px; }
.result .headline .num{ color:var(--accent); }

.disclaimer{ max-width:1100px; margin:22px auto 0; padding:0 28px; color:var(--ink-dim); font-size:12px; line-height:1.5; }