/* ====== Reset & Base ====== */
:root{
  --bg:#0b0f0d;
  --card:#0f1512;
  --elev:#121a16;
  --text:#e7f5ed;
  --muted:#a8c7b8;
  --focus:#36c48b;
  --border:#203027;
  --accent:#1b7f57;
  --accent-2:#134a35;
  --danger:#ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  background: radial-gradient(1200px 600px at 30% -20%, #123324 0%, transparent 60%),
              radial-gradient(1000px 500px at 90% 10%, #163b2a 0%, transparent 60%),
              var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:24px;
}

/* ====== Layout ====== */
.container{max-width:980px;margin:0 auto}
.header{margin-bottom:16px}
h1{font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem); font-weight:700}
h2{font-size:1.05rem;font-weight:700}
.muted{color:var(--muted);margin-top:6px}

.card{
  background: linear-gradient(180deg, var(--card), var(--elev));
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow);
}

.grid{display:grid; gap:12px}
.grid-2{grid-template-columns: repeat(2, minmax(0, 1fr))}
.grid-3{grid-template-columns: 2fr 1fr 2fr}
@media (max-width: 720px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

/* ====== Fields ====== */
.field label{display:block;font-weight:600;margin-bottom:6px}
.field input, .field textarea, .field select{
  width:100%;padding:12px 14px;border:1px solid var(--border);
  border-radius:12px;background:#0c1310;color:var(--text);
  outline:none;transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--focus); box-shadow:0 0 0 3px rgba(54,196,139,.2);
}
.req{color:#79f0bf}

/* ====== Items ====== */
.items{margin-top:14px}
.items-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.items-list{display:flex;flex-direction:column;gap:12px}
.item-row{padding:12px;border:1px solid var(--border);border-radius:14px;background:#0d1512}
.row-actions{margin-top:8px;display:flex;justify-content:flex-end}

/* ====== Buttons ====== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600; border-radius:12px; border:1px solid transparent; cursor:pointer;
  padding:12px 16px; text-decoration:none; transition: transform .02s ease, background-color .2s, border-color .2s, opacity .2s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg, #1aa86f, #138657); border-color:#117247; color:#07110c}
.btn-secondary{background:#0f6a47; border-color:#0d5a3d; color:#e9fff6}
.btn-ghost{background:transparent; border-color:#244334; color:#cfe8dd}
.btn-link{background:transparent; border:none; color:#8bd6b4; padding:4px 0}
.btn-link.danger{color:var(--danger)}

.btn-primary:hover{background:linear-gradient(180deg, #21c783, #159962)}
.btn-secondary:hover{background:#117452}
.btn-ghost:hover{border-color:#2b5a44; color:#eafaf3}
.btn-link:hover{text-decoration:underline}

/* ====== Footer / Tips ====== */
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.tips{margin-top:16px}
.footer{opacity:.8;text-align:center;margin-top:16px;font-size:.95rem}
.help{display:block;margin-top:6px;color:var(--muted);font-size:.9rem}