:root { --gap: .6rem; }
body { font-family: system-ui, "Segoe UI", Arial, sans-serif; }

.topnav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem;
  padding: .7rem 1rem; background: #11212e; color: #e8eef2;
  position: sticky; top: 0; z-index: 10;
}
.topnav a { color: #cfe0ec; text-decoration: none; font-size: .95rem; }
.topnav a:hover { color: #fff; }
.topnav .brand { font-weight: 700; margin-inline-end: auto; color: #fff; }
.topnav .brand small { color: #9fd3a8; font-weight: 500; }
.topnav .cta { background: #2c7a4b; color: #fff; padding: .25rem .7rem; border-radius: .4rem; }
.topnav .who { color: #9fd3a8; font-size: .82rem; }
.topnav .who a { color: #cfe0ec; }
.authbanner { background: #b45309; color: #fff; text-align: center;
              padding: .4rem 1rem; font-size: .9rem; }

.userrow { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.2fr auto;
           gap: .5rem; align-items: center; padding: .35rem .4rem; border-bottom: 1px solid #eef2f5; }
.userrow.head { font-weight: 600; color: #667; border-bottom: 2px solid #e2e8ee; }
.userrow .email { font-family: ui-monospace, monospace; font-size: .82rem; word-break: break-all; }
.userrow select, .userrow button { margin: 0; padding: .2rem .4rem; }
@media (max-width: 640px) { .userrow { grid-template-columns: 1fr 1fr; }
  .userrow.head { display: none; } }

.container { max-width: 1000px; margin: 1.2rem auto; padding: 0 1rem; }
footer.muted { color: #888; font-size: .8rem; margin-top: 2rem; }
.muted { color: #888; }

.cards { display: flex; flex-wrap: wrap; gap: var(--gap); }
.card { flex: 1 1 150px; background: var(--pico-card-background-color, #f6f8fa);
        border: 1px solid #e2e8ee; border-radius: .6rem; padding: 1rem; text-align: center; }
.card .num { font-size: 2rem; font-weight: 700; color: #11212e; }
.card .lbl { color: #667; font-size: .85rem; }

table { font-size: .9rem; }
th, td { padding: .35rem .5rem !important; }
.tag { display: inline-block; background: #e7f0ff; color: #224; border-radius: .8rem;
       padding: .05rem .55rem; font-size: .78rem; margin: 0 .1rem; }
.tag.warn { background: #ffe9e0; color: #7a2; }
.tag.lim { background: #fff3cd; color: #7a5; }

/* schedule grid */
.day { margin-bottom: 1rem; }
.day h4 { margin: .4rem 0; color: #11212e; border-bottom: 2px solid #e2e8ee; }
.slot { display: grid; grid-template-columns: 6.5rem 7rem 1fr auto; gap: .5rem;
        align-items: center; padding: .25rem .4rem; border-bottom: 1px solid #eef2f5; }
.slot .time { font-variant-numeric: tabular-nums; color: #355; font-weight: 600; }
.slot .task { font-weight: 600; }
.slot .pts { color: #999; font-size: .8rem; font-variant-numeric: tabular-nums; }
.slot.gap { background: #fff6f4; }
.night { color: #4456a6; }

/* fairness bars */
.fair-row { display: grid; grid-template-columns: 6rem 1fr 5.5rem; gap: .6rem;
            align-items: center; margin: .25rem 0; }
.bar { background: #e9eef3; border-radius: .4rem; height: 1.1rem; overflow: hidden; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg,#2c7a4b,#56b87f); }
.fair-row .val { text-align: end; font-variant-numeric: tabular-nums; color: #355; }
.fair-row .val small { color: #aaa; }

.alert { background: #fff3cd; border: 1px solid #ffe08a; border-radius: .5rem;
         padding: .6rem .9rem; margin: .6rem 0; }
.ok { background: #e7f6ec; border: 1px solid #b6e2c4; border-radius: .5rem;
      padding: .6rem .9rem; margin: .6rem 0; }
.inline { display: inline; }
form.inline button { padding: .1rem .5rem; font-size: .8rem; }
.row-actions { white-space: nowrap; }
details.add { margin: 1rem 0; }
details.add summary { cursor: pointer; font-weight: 600; }
fieldset.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; }
@media (max-width: 640px) {
  .slot { grid-template-columns: 5.5rem 1fr; }
  .slot .pts { display: none; }
  fieldset.grid-2 { grid-template-columns: 1fr; }
}