:root {
  color-scheme: light;
  --bg: #f6f7fb;
  --panel: #ffffff;
  --ink: #17202a;
  --muted: #697586;
  --line: #dde3ea;
  --blue: #1769e0;
  --blue-dark: #0f52b6;
  --red: #b42318;
  --green: #16784c;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

a {
  color: var(--blue);
  text-decoration: none;
}

.topbar {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 28px;
}

.brand,
nav {
  align-items: center;
  display: flex;
  gap: 18px;
}

.brand {
  color: var(--ink);
  font-weight: 800;
}

.brand-mark {
  align-items: center;
  background: #17202a;
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 42px;
}

.shell {
  margin: 0 auto;
  max-width: 1120px;
  padding: 32px 22px;
}

.page-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 34px;
  line-height: 1.15;
}

h2 {
  font-size: 20px;
  margin-bottom: 16px;
}

.eyebrow {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
  margin-top: 8px;
}

.auth-panel,
.panel,
.table-card,
.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.auth-panel {
  display: grid;
  gap: 22px;
  margin: 64px auto 0;
  max-width: 460px;
  padding: 28px;
}

.form {
  display: grid;
  gap: 16px;
}

.form.wide {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  max-width: 560px;
  padding: 24px;
}

label {
  color: #354052;
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
}

input,
select {
  border: 1px solid #c9d3df;
  border-radius: 6px;
  font: inherit;
  min-height: 42px;
  padding: 9px 11px;
  width: 100%;
}

input:focus,
select:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(23, 105, 224, 0.15);
}

button,
.as-link {
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 800;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
}

.primary {
  background: var(--blue);
  color: #fff;
}

.primary:hover {
  background: var(--blue-dark);
}

.secondary {
  background: #edf2f7;
  color: #17202a;
}

.link-button {
  background: transparent;
  color: var(--blue);
  min-height: 0;
  padding: 0;
}

.notice,
.error {
  border-radius: 6px;
  padding: 12px 14px;
}

.notice {
  background: #fff7d6;
  color: #6b5600;
}

.error {
  background: #ffebe9;
  color: var(--red);
}

.metrics {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 22px;
}

.metric {
  display: grid;
  gap: 6px;
  padding: 20px;
}

.metric strong {
  font-size: 34px;
}

.metric span,
td span {
  color: var(--muted);
}

.table-card,
.panel {
  padding: 22px;
}

.table-head {
  display: flex;
  justify-content: space-between;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border-top: 1px solid var(--line);
  padding: 14px 10px;
  text-align: left;
  vertical-align: top;
}

td:first-child {
  display: grid;
  gap: 4px;
}

.grid-two {
  display: grid;
  gap: 22px;
  grid-template-columns: 360px 1fr;
}

.check-row,
.switch {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.check-row input,
.switch input {
  min-height: auto;
  width: auto;
}

.assignment {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  padding: 18px 0;
}

.assignment:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.assignment-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.assignment-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-form {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: 240px 1fr 120px 88px;
  padding: 18px 0;
}

.app-form:first-child {
  border-top: 0;
  padding-top: 0;
}

code {
  background: #eef2f7;
  border-radius: 4px;
  padding: 2px 5px;
}

@media (max-width: 800px) {
  .topbar,
  .page-head,
  .assignment-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  nav,
  .metrics,
  .grid-two,
  .assignment-grid,
  .app-form {
    grid-template-columns: 1fr;
  }

  nav {
    align-items: flex-start;
    display: grid;
  }
}

/* Workspace refresh */
:root { --bg:#f5f7fc; --ink:#1c2841; --muted:#7a869d; --line:#e7ebf3; --blue:#5564dc; --blue-dark:#4352c6; font-family:"Segoe UI",Arial,sans-serif; }
body { font-size:14px; line-height:1.5; }
.admin-layout { padding-left:232px; }
.topbar { position:fixed; inset:0 auto 0 0; width:232px; padding:32px 20px; flex-direction:column; align-items:stretch; justify-content:flex-start; border-bottom:0; border-right:1px solid var(--line); }
.brand { gap:12px; font-size:18px; letter-spacing:-.4px; }
.brand small { display:block; font-size:9px; letter-spacing:1.8px; color:var(--muted); margin-top:3px; }
.brand-mark { background:var(--blue); width:40px; height:40px; border-radius:12px; box-shadow:0 5px 12px #5564dc22; font-size:15px; }
nav { flex:1; margin-top:48px; flex-direction:column; align-items:stretch; gap:8px; }
.nav-label { font-size:10px; color:var(--muted); letter-spacing:1.8px; padding:0 14px 10px; }
nav > a { color:#69768e; padding:12px 14px; border-radius:9px; font-weight:600; }
nav > a:hover, nav > a.selected { background:#eef0ff; color:var(--blue); }
.admin-identity { margin-top:auto; display:flex; align-items:center; gap:10px; padding:18px 4px 12px; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.admin-identity small { display:block; font-size:11px; color:var(--muted); }
.avatar { width:34px; height:34px; border-radius:50%; background:#edf0ff; color:var(--blue); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:700; }
nav form { padding:4px; }
.link-button { color:var(--muted); font-size:12px; font-weight:500; }
.shell { max-width:1320px; padding:42px 40px; }
h1 { font-size:28px; letter-spacing:-.8px; font-weight:650; }
h2 { font-size:17px; letter-spacing:-.3px; font-weight:650; }
.eyebrow { color:var(--blue); font-size:10px; letter-spacing:1.8px; margin-bottom:9px; }
.page-head { gap:20px; margin-bottom:28px; }
.page-head .muted { font-size:13px; }
.auth-panel,.panel,.table-card,.metric,.form.wide { border-radius:14px; box-shadow:0 4px 20px #24345b03; }
.metric { padding:22px 24px; gap:7px; }
.metric > span { font-size:12px; font-weight:600; }
.metric strong { font-size:32px; font-weight:650; line-height:1.2; }
.metric small { color:var(--muted); font-size:11px; }
.metric:nth-child(2) strong { color:var(--blue); }
.metric:nth-child(3) strong { color:#259778; }
.table-card { padding:24px; }
.table-head { gap:20px; align-items:center; margin-bottom:24px; }
.table-head h2 { margin-bottom:0; }
.table-head .muted { margin-top:4px; font-size:12px; }
.search { max-width:230px; background:#f8faff; font-size:12px; }
.table-scroll { overflow-x:auto; }
th { color:#8b95a7; font-size:10px; text-transform:uppercase; letter-spacing:.9px; font-weight:600; background:#fafbfe; }
th,td { padding:16px 12px; vertical-align:middle; }
td:first-child { display:table-cell; }
td:first-child a { font-weight:600; }
td:first-child > span { display:block; font-size:11px; margin-top:4px; }
tbody tr:hover { background:#fafbff; }
.badge { display:inline-flex; align-items:center; gap:6px; border-radius:20px; padding:4px 10px; font-size:11px; text-transform:capitalize; }
.badge.success { color:#248364; background:#eaf8f1; }
.badge.success:before { content:""; width:5px; height:5px; background:#2fa57d; border-radius:50%; }
.badge.neutral { background:#f0f2f7; color:#79849a; }
.machine-cell { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; }
.grid-two { grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr); align-items:start; }
.panel { padding:24px; min-width:0; }
label { font-weight:500; font-size:12px; color:#5b6880; }
input,select { background:#fbfcff; border-color:#dfe5f0; border-radius:8px; font-size:13px; }
input[type=checkbox] { accent-color:var(--blue); width:16px; height:16px; }
button,.as-link { border-radius:8px; font-size:12px; font-weight:600; align-items:center; transition:background .15s ease; }
.secondary { color:#5b6880; background:#eff2f8; }
.secondary:hover { background:#e5eaf4; }
.assignment { padding:24px 0; gap:16px; }
.assignment button { justify-self:start; }
.assignment-head strong { font-size:14px; }
.app-form { grid-template-columns:minmax(130px,1fr) minmax(180px,2fr) 85px 70px; align-items:end; }
.notice,.error { font-size:13px; margin-bottom:16px; }
.auth-layout .topbar { position:static; width:auto; border:0; background:transparent; padding:28px 36px; }
.auth-layout .shell { padding-top:0; }
.auth-panel { padding:36px; margin-top:36px; max-width:420px; }
.auth-panel h1 { font-size:30px; }
.auth-panel .muted { font-size:13px; }
.auth-panel .form { gap:20px; }
.search-empty { padding:20px 0 0; }
[hidden] { display:none!important; }
@media(max-width:1100px) { .shell { padding:30px 24px; } .grid-two { grid-template-columns:1fr; } .app-form { grid-template-columns:1fr 1fr; } }
@media(max-width:760px) {
 .admin-layout { padding-left:0; }
 .topbar { position:static; width:auto; padding:18px 20px; border-right:0; border-bottom:1px solid var(--line); }
 nav { margin-top:18px; flex-direction:row; flex-wrap:wrap; display:flex; align-items:center; gap:8px; }
 .nav-label,.admin-identity { display:none; }
 nav > a { padding:8px 12px; }
 nav form { margin-left:auto; }
 .shell { padding:26px 18px; }
 .page-head { align-items:flex-start; }
 h1 { font-size:25px; }
 .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 .metric { padding:14px 12px; }
 .metric strong { font-size:26px; }
 .metric small { display:none; }
 .table-head { align-items:flex-start; flex-direction:column; gap:14px; }
 .search { max-width:none; }
 .panel,.table-card { padding:18px; }
 .assignment-grid,.app-form { grid-template-columns:1fr; }
 .auth-layout .shell { padding:12px 18px; }
 .auth-panel { padding:28px; margin-top:12px; }
}