:root { --bg1: #f7efe4; --bg2: #c5d7be; --ink:#1f2b22; --brand:#114b3a; --card:#ffffff; }
*{box-sizing:border-box;font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif}
body{margin:0;color:var(--ink)}
.bg{position:fixed;inset:0;background:radial-gradient(circle at 20% 20%,var(--bg2),var(--bg1));z-index:-1}
.container{max-width:1100px;margin:24px auto;padding:16px}
.card,.panel{background:var(--card);border:1px solid #d8ded5;border-radius:14px;padding:16px;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.hidden{display:none}
.row{display:flex;gap:12px;align-items:center}.between{justify-content:space-between}
.grid{display:grid;gap:10px}.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:repeat(3,1fr)}
label{display:block;margin:8px 0 4px;font-weight:600}
input,select,button{width:100%;padding:10px;border-radius:8px;border:1px solid #cdd8cd}
button{background:var(--brand);color:white;border:none;cursor:pointer}
button.ghost{background:#eef4ef;color:#2f4738}
.muted{color:#5f7464}.error{color:#9b1c1c}
pre{max-height:300px;overflow:auto;background:#f4f8f4;padding:10px;border-radius:8px}
table{width:100%;border-collapse:collapse}th,td{padding:8px;border-bottom:1px solid #e7ece7;text-align:left}
@media (max-width: 900px){.two,.three{grid-template-columns:1fr}}