:root{
  --bg:#101314; --surface:#191D1F; --surface-2:#20262A;
  --text:#EDEDE8; --text-dim:#9BA3A6; --rule:#2B3235;
  --steel:#7C9A92; --accent:#D9A63F; --danger:#D9573F; --warn:#D9A63F; --ok:#4F9E6E;
}
@media (prefers-color-scheme: dark) {}
:root:not([data-theme="dark"]){
  --bg:#F1F1EC; --surface:#FFFFFF; --surface-2:#EDEEE9;
  --text:#1B2129; --text-dim:#5B6469; --rule:#D8DAD3;
  --steel:#3F6E62; --accent:#A8792C; --danger:#A8362C; --warn:#A8792C; --ok:#2F7A4B;
}

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:'IBM Plex Sans',system-ui,sans-serif; }
h1,h2,h3{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.02em; margin:0 0 .5rem; }
.eyebrow{ font-family:var(--font-mono,monospace); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); margin:0 0 .4rem; }
.dim{ color:var(--text-dim); }

.wrap{ max-width:1100px; margin:0 auto; padding:1.4rem; }
.tabs{ display:flex; gap:.5rem; margin-bottom:1.2rem; border-bottom:1px solid var(--rule); }
.tab{ background:none; border:none; color:var(--text-dim); font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.03em; font-size:.9rem; padding:.6rem 1rem; cursor:pointer; border-bottom:2px solid transparent; }
.tab.active{ color:var(--text); border-bottom-color:var(--steel); }

.btn{ font-family:'Oswald',sans-serif; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; background:var(--surface); color:var(--text); border:1px solid var(--steel); border-radius:4px; padding:.5rem .9rem; cursor:pointer; }
.btn:hover{ background:var(--steel); color:var(--surface); }
.btn-accent{ border-color:var(--accent); }
.btn-accent:hover{ background:var(--accent); color:var(--surface); }

table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--rule); font-size:.88rem; }
th{ font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.7rem; letter-spacing:.05em; color:var(--text-dim); }
tr.clickable{ cursor:pointer; }
tr.clickable:hover{ background:var(--surface-2); }

.badge{ font-family:'Oswald',sans-serif; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; padding:.2rem .5rem; border-radius:3px; display:inline-block; }
.badge-ACTIVE{ background:color-mix(in srgb, var(--ok) 20%, transparent); color:var(--ok); }
.badge-EXPIRING{ background:color-mix(in srgb, var(--warn) 20%, transparent); color:var(--warn); }
.badge-EXPIRED{ background:color-mix(in srgb, var(--danger) 20%, transparent); color:var(--danger); }
.badge-NONE{ background:var(--surface-2); color:var(--text-dim); }

.card{ background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:1.1rem 1.3rem; margin-bottom:1rem; }
label{ display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; color:var(--text-dim); margin-bottom:.6rem; }
input, select, textarea{ font-family:inherit; font-size:.9rem; background:var(--surface-2); color:var(--text); border:1px solid var(--rule); border-radius:4px; padding:.5rem .6rem; }
.row{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; }
.row > label{ flex:1 1 140px; margin-bottom:0; }

dialog{ background:var(--surface); color:var(--text); border:1px solid var(--rule); border-radius:8px; padding:1.4rem; max-width:560px; width:92vw; }
dialog::backdrop{ background:rgba(0,0,0,.5); }

.set-row{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:.4rem; margin-bottom:.4rem; align-items:center; }
.records-list{ display:flex; flex-wrap:wrap; gap:.6rem; }
.record-tile{ background:var(--surface-2); border:1px solid var(--rule); border-radius:6px; padding:.6rem .8rem; min-width:140px; }
.record-tile .lift{ font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.72rem; color:var(--steel); }
.record-tile .weight{ font-size:1.3rem; font-weight:600; }
.record-tile .meta{ font-size:.68rem; color:var(--text-dim); }