:root{
  --green:#2ecc71;
  --yellow:#f1c40f;
  --dark:#1f3a2e;
  --bg:#f7fff7;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;background:var(--bg);color:#123}
.site-header{display:flex;align-items:center;gap:1rem;padding:0.6rem 1rem;background:linear-gradient(90deg,var(--green),var(--yellow));color:#003;position:sticky;top:0}
.logo{width:800px;height:80px;object-fit:contain;border-radius:12px;background:#fff;padding:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.title{margin:0 auto;font-size:1.8rem;font-weight:800;letter-spacing:.5px;text-shadow:0 2px 0 rgba(255,255,255,.6)}
.topnav .btn{margin-left:.5rem}
.container{max-width:1100px;margin:1rem auto;padding:0 1rem}
.card{background:#fff;border-radius:16px;padding:1rem 1.2rem;margin:1rem 0;box-shadow:0 6px 20px rgba(0,0,0,.07)}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.child-card{background:#fcfff0;border:2px dashed var(--yellow);border-radius:16px;padding:1rem;text-align:center}
.form label{display:block;margin:.6rem 0}
.form input,.form select,.form textarea{width:100%;padding:.6rem;border:1px solid #cfd8dc;border-radius:10px}
.btn{display:inline-block;padding:.55rem 1rem;border-radius:999px;border:0;background:#eef2f7;text-decoration:none;cursor:pointer;transition:transform .06s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(0,0,0,.15)}
.btn.primary{background:var(--green);color:#fff;font-weight:700}
.btn.warning{background:var(--yellow);color:#000;font-weight:700}
.btn.danger{background:#e74c3c;color:#fff}
.btn.ghost{background:transparent;border:2px solid #0002}
.notice{padding:.6rem 1rem;background:#fff3cd;border:1px solid #ffe58f;border-radius:10px}
.success{color:#1e7e34}
.small{font-size:.9rem}
.muted{opacity:.8}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:.5rem;border-bottom:1px solid #eee;text-align:left}
.site-footer{padding:1rem;text-align:center;color:#345}


.badge{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.85rem;border:1px solid #0001}
.badge.success{background:#e9f9ee;color:#0f8a3c;border-color:#b7e5c6}
.badge.danger{background:#fde9e9;color:#b00020;border-color:#f5c2c7}
.badge.neutral{background:#eef2f7;color:#334e68;border-color:#d9e2ec}
.filterbar{display:flex;gap:.6rem;align-items:center;margin:.6rem 0}
.filterbar .btn{padding:.45rem .8rem}


.notice.info{background:#e6f2ff;border-color:#b3daff}
.notice .btn{margin-left:.6rem}
code{background:#0001;padding:0 .3rem;border-radius:6px}


/* Responsive Styles */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .card {
    padding: 1rem;
    margin: 1rem 0;
  }
  .filterbar {
    flex-direction: column;
    gap: .5rem;
  }
  .filterbar input, .filterbar select {
    width: 100%;
  }
  .btn {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  h2, h3, h4 {
    font-size: 1.4rem;
  }
  .table-wrap {
    overflow-x: auto;
  }
  .badge {
    font-size: .75rem;
  }
}