:root{
  --bg:#0b1220;
  --card:#0f1b33;
  --text:#eaf0ff;
  --muted:#b8c6f0;
  --accent:#7aa2ff;
  --danger:#ff6b6b;
  --ok:#3ddc97;
  --border: rgba(255,255,255,.12);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, #162a5a 0%, var(--bg) 45%);
  color:var(--text);
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{ width:min(980px, 92vw); margin: 20px auto 60px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px 16px; position:sticky; top:0;
  background: rgba(11,18,32,.7); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border); z-index:100;
}

.brand{font-weight:800; letter-spacing:.2px}

.hamburger{ width:44px; height:38px; background:transparent; border:1px solid var(--border);
  border-radius:10px; display:grid; place-items:center; gap:4px; padding:8px; cursor:pointer; }
.hamburger span{ display:block; width:18px; height:2px; background:var(--text); border-radius:2px; opacity:.95; }

.menu{ position:absolute; right:16px; top:58px; background: rgba(15,27,51,.98); border:1px solid var(--border);
  border-radius:12px; padding:10px; display:none; min-width: 220px; box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.menu.open{display:flex; flex-direction:column}
.menu a{ padding:10px 10px; border-radius:10px; color:var(--text); }
.menu a:hover{background: rgba(122,162,255,.15); text-decoration:none}

/* Cascading submenu styling inside hamburger menu */
.menu details.submenu {
  border-radius: 10px;
}

.menu details.submenu > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--text);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu details.submenu > summary::-webkit-details-marker {
  display: none;
}

.menu details.submenu > summary::after {
  content: "›";
  transform: rotate(90deg);
  opacity: .8;
  font-weight: 700;
}

.menu details.submenu[open] > summary {
  background: rgba(122,162,255,.15);
}

.menu details.submenu[open] > summary::after {
  transform: rotate(-90deg);
}

.menu .submenu-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 6px 10px 18px;
}

.menu .submenu-items a {
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text);
}

.menu .submenu-items a:hover {
  background: rgba(122,162,255,.12);
  text-decoration: none;
}

.card{ background: rgba(15,27,51,.85); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow: 0 18px 50px rgba(0,0,0,.25); }

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

h1,h2,h3{margin:0 0 10px}
p{margin:0 0 12px; color:var(--muted)}

.form{ display:grid; gap:10px; }
label{font-size:14px; color:var(--muted)}
input, select, textarea{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--border);
  background: rgba(6,10,20,.55); color:var(--text); outline:none;
}
input:focus, textarea:focus{border-color: rgba(122,162,255,.55)}

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

.btn{ padding:12px 14px; border-radius:12px; border:1px solid transparent; background: var(--accent);
  color:#06102a; font-weight:700; cursor:pointer; }
.btn.secondary{ background: transparent; color:var(--text); border-color: var(--border); }
.btn.danger{ background: var(--danger); color:#1b0b0b; }
.btn:disabled{opacity:.55; cursor:not-allowed}

.notice{padding:10px 12px; border-radius:12px; border:1px solid var(--border); background: rgba(255,255,255,.05)}
.notice.ok{border-color: rgba(61,220,151,.35)}
.notice.bad{border-color: rgba(255,107,107,.35)}
.small{font-size:13px; color:var(--muted)}

/* Print ID Cards */
@media print {
  body{background:#fff; color:#000}
  .topbar, .no-print { display:none !important; }
  .container{width:auto; margin:0}
  .card{box-shadow:none; border:none; background:transparent; padding:0}
}
.idsheet{ display:grid; grid-template-columns: repeat(2, 3.5in); gap: 0.25in; align-items:start; }
@media print{ .idsheet{grid-template-columns: repeat(2, 3.5in)} }
.idcard{ width:3.5in; height:2.25in; border:1px solid #333; border-radius:10px; padding:10px; display:flex; flex-direction:column; justify-content:space-between; position:relative; }
.idtitle{font-weight:800; font-size:14px}
.idline{font-size:12px}
.qrwrap{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.qrimg{width:1.1in; height:1.1in}
.page-break{break-after:page;}

/* Printed chip on ID cards (screen only) */
.printed-chip{ position:absolute; top:8px; right:8px; padding:2px 8px; font-size:11px; border-radius:999px; background: rgba(61,220,151,.15); border: 1px solid rgba(61,220,151,.35); color: var(--text); }
@media print { .printed-chip { display:none !important; } }

/* Lamb glow */
.lambs-row svg{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }

/* Letter-size template (2 columns x 4 rows, 8 per page) */
.letter-sheet{ display:grid; grid-template-columns: repeat(2, 3.5in); gap: 0.25in 0.35in; justify-content:center; }
.idcard-print{ width:3.5in; height:2.25in; border:1px solid #333; border-radius:10px; padding:10px; display:flex; flex-direction:column; justify-content:space-between; }
@page { margin: 0.5in; }

/* Status badges */
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:rgba(255,255,255,.06); }
.badge.ok{ background: rgba(61,220,151,.15); border-color: rgba(61,220,151,.35); color: var(--text); }
.badge.warn{ background: rgba(255,193,7,.15); border-color: rgba(255,193,7,.35); color: var(--text); }
.badge.muted{ background: rgba(255,255,255,.06); color: var(--muted); }

/* Lamb PNG polish */
.lambs-row .lamb-img{
  display:block;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  image-rendering: auto;
}