:root {
  --bg: #0f172a;
  --panel: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #22c55e;
  --accent-2: #3b82f6;
  --danger: #ef4444;
  --border: #1f2937;
  --body-bg: linear-gradient(-40deg,rgb(7, 172, 238) -5%, rgba(87, 199, 133, 0.9) 50%, rgba(237, 221, 83, 1) 105%);
}

* { box-sizing: border-box; }

body {
  width:100vw;
  height:100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: #2A7B9B;
  background: url('../woodbg2.jpg');
  color: var(--text);
}

.container {
  max-width: 980px;
  margin: 24px auto;
  padding: 0 16px;
}

.nav {
  display: flex; gap: 12px; align-items: center; padding: 12px 0;
}

.nav a {
  text-decoration: none; color: var(--text); padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
}
.nav a:hover { background: #0b1220; }

.panel {
  background-color:rgba(157, 90, 27, 0.8);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  /*
  backdrop-filter: blur(8px);
  */
}
a{background-color:rgb(111, 186, 233)}
h1, h2 { margin: 8px 0 16px; }
label { display: block; font-weight: 600; margin: 12px 0 6px; color: var(--muted); }
input[type="text"], input[type="number"], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background-color:  rgba(250, 250, 250, 0.4);/*background: #0b1220; color: var(--text);*/
}
textarea{
  resize: none;
}
button {
  background-color: var(--accent); color: #041108; border: none; padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 700;
}
button.secondary { background: var(--accent-2); color: #051327; }
button.danger { background: var(--danger); color: #160202; }

.grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  color:white
}

.card {
  padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #0b1220;
}

.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 12px; margin-right: 6px; border: 1px solid var(--border); }

.muted { color: var(--muted); font-size: 14px; }
.row { display: flex; gap: 10px; }
hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }