@import url('https://fonts.googleapis.com/css2?family=Literata:wght@400;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg-1:#e6f2ff;
  --bg-2:#fdf5e6;
  --panel:#ffffff;
  --border:#d4dde7;
  --accent:#087c7a;
  --accent-hover:#066765;
  --text:#1f2a37;
  --muted:#6b7280;
  --danger:#b91c1c;
  --danger-bg:#fff4f4;
  --warning:#9a6700;
  --warning-bg:#fff8dd;
  --success:#0f766e;
  --success-bg:#e6fffb;
  --radius:18px;
  --shadow:0 18px 45px rgba(15, 23, 42, 0.12);
}

* { box-sizing:border-box; }

body {
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:"Space Grotesk", system-ui, sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(14, 165, 164, 0.18), transparent 35%),
    radial-gradient(circle at 90% 20%, rgba(251, 113, 133, 0.18), transparent 40%),
    linear-gradient(120deg, var(--bg-1), var(--bg-2));
}

button,
input,
select { font:inherit; }

.page-header {
  width:min(1200px, 100%);
  margin:0 auto;
  padding:1.5rem 1.8rem .95rem;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.brand {
  font-family:"Literata", Georgia, serif;
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:.025em;
}

h1,
h2,
p { margin-top:0; }

h1 {
  margin:.2rem 0 .28rem;
  font-size:clamp(1.75rem, 2.5vw, 2rem);
  font-weight:600;
  letter-spacing:.015em;
}

h2 {
  margin:0;
  font-size:1.08rem;
  letter-spacing:.01em;
}

.session,
.muted,
.introduction p,
.enrollment-panel p { color:var(--muted); }

.session { margin:0; font-size:.78rem; }

nav {
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

nav a,
.nav-button {
  appearance:none;
  border:1px solid rgba(148, 163, 184, .42);
  border-radius:999px;
  background:rgba(255,255,255,.62);
  color:var(--text);
  cursor:pointer;
  font-size:.84rem;
  font-weight:600;
  line-height:1.1;
  padding:.45rem .82rem;
  text-decoration:none;
}

nav a:hover,
.nav-button:hover { background:#fff; }

main {
  width:min(1200px, 100%);
  margin:0 auto;
  padding:0 1.8rem 3rem;
  display:grid;
  gap:1.15rem;
}

.panel {
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow);
}

.introduction {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  padding:1.2rem 1.35rem;
}

.introduction p { margin:.35rem 0 0; max-width:650px; font-size:.9rem; line-height:1.55; }

.role-notice {
  flex:0 1 330px;
  border-left:3px solid rgba(14, 165, 164, .42);
  padding:.15rem 0 .15rem .75rem;
}

.management-layout {
  display:grid;
  grid-template-columns:minmax(280px, 340px) minmax(0, 1fr);
  gap:1.15rem;
  align-items:start;
}

.create-panel,
.devices-panel,
.enrollment-panel { padding:1.2rem 1.3rem; }

.create-panel h2 + .muted { margin:.45rem 0 1rem; font-size:.85rem; line-height:1.5; }

form { display:grid; gap:.8rem; }

.field { display:grid; gap:.34rem; }

label {
  color:#475569;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase;
}

input,
select {
  width:100%;
  min-height:42px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  color:var(--text);
  padding:.58rem .68rem;
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
.table-scroll:focus-visible {
  outline:3px solid rgba(14, 165, 164, .42);
  outline-offset:2px;
}

button {
  border:0;
  border-radius:10px;
  cursor:pointer;
  font-size:.84rem;
  font-weight:600;
  line-height:1.15;
  padding:.62rem .88rem;
}

button:disabled { cursor:not-allowed; opacity:.58; }

.primary { background:var(--accent); color:#fff; }
.primary:hover:not(:disabled) { background:var(--accent-hover); }
.secondary { border:1px solid var(--border); background:#fff; color:var(--text); }
.secondary:hover:not(:disabled) { background:#f8fafc; }
.danger { background:var(--danger); color:#fff; }
.danger:hover:not(:disabled) { background:#991b1b; }

.form-status,
.page-status,
.copy-status { min-height:1.15rem; margin:0; color:var(--muted); font-size:.79rem; line-height:1.4; }
.is-error { color:var(--danger); }
.is-success { color:var(--success); }

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  margin-bottom:.85rem;
}

.section-heading .muted { margin:.35rem 0 0; font-size:.82rem; }

.list-controls {
  display:grid;
  grid-template-columns:minmax(150px, 210px) auto;
  gap:.4rem .55rem;
  align-items:end;
}

.list-controls label { grid-column:1 / -1; }
.list-controls select { min-height:38px; font-size:.82rem; }
.list-controls button { min-height:38px; white-space:nowrap; }

.table-scroll {
  overflow-x:auto;
  border:1px solid #e2e8f0;
  border-radius:12px;
  -webkit-overflow-scrolling:touch;
}

table {
  width:100%;
  min-width:790px;
  border-collapse:collapse;
  background:#fff;
  font-size:.8rem;
}

th {
  padding:.64rem .6rem;
  border-bottom:1px solid #e2e8f0;
  background:#f8fafc;
  color:#475569;
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.045em;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap;
}

td {
  padding:.68rem .6rem;
  border-bottom:1px solid #e7edf4;
  vertical-align:middle;
}

tbody tr:last-child td { border-bottom:0; }
.device-name { font-weight:600; }
.subtle { color:var(--muted); font-size:.75rem; }
.empty { padding:1.25rem; color:var(--muted); text-align:center; }

.status-pill {
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  line-height:1;
  padding:.28rem .5rem;
  white-space:nowrap;
}

.status-pill.success { color:#0f5f5a; background:var(--success-bg); }
.status-pill.warning { color:var(--warning); background:var(--warning-bg); }
.status-pill.danger { color:#991b1b; background:#fee2e2; }
.status-pill.muted { color:#475569; background:#eef2f7; }

.row-actions { display:flex; flex-wrap:wrap; gap:.4rem; min-width:150px; }
.row-actions button { padding:.43rem .58rem; font-size:.74rem; }
.row-actions .quiet { border:1px solid var(--border); background:#fff; color:var(--text); }
.row-actions .quiet:hover { background:#f8fafc; }

.enrollment-panel {
  border-color:rgba(14, 165, 164, .5);
  background:linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
}

.enrollment-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.enrollment-heading p { margin:.4rem 0 0; font-size:.86rem; }

.icon-button {
  width:34px;
  height:34px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:var(--text);
  font-size:1.25rem;
  font-weight:400;
  line-height:1;
  padding:0;
}

.link-field { display:grid; gap:.36rem; margin-top:1rem; }
.copy-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.55rem; }
.copy-row input { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.78rem; }
.copy-row button { white-space:nowrap; }
.expiry { margin:.58rem 0 0; color:#0f5f5a !important; font-size:.82rem; font-weight:600; }
.enrollment-panel .muted { margin:.3rem 0 0; font-size:.8rem; line-height:1.45; }

dialog {
  width:min(430px, calc(100vw - 2rem));
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 24px 70px rgba(15, 23, 42, .28);
  color:var(--text);
  padding:0;
}

dialog::backdrop { background:rgba(15, 23, 42, .46); }
.dialog-content { display:grid; gap:.8rem; padding:1.25rem 1.3rem; }
.dialog-content h2 { font-size:1.06rem; }
.dialog-content p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.5; }
.dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:.55rem; margin-top:.15rem; }

@media (max-width: 960px) {
  .management-layout { grid-template-columns:1fr; }
  .create-panel form { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) auto; align-items:end; }
  .create-panel .field { min-width:0; }
  .create-panel .form-status { grid-column:1 / -1; }
}

@media (max-width: 680px) {
  .page-header,
  main { padding-left:1rem; padding-right:1rem; }
  .page-header,
  .introduction,
  .section-heading { align-items:flex-start; flex-direction:column; }
  nav { justify-content:flex-start; }
  .role-notice { border-left:0; border-top:3px solid rgba(14, 165, 164, .42); padding:.6rem 0 0; }
  .create-panel form { grid-template-columns:1fr; }
  .list-controls { width:100%; grid-template-columns:minmax(0, 1fr) auto; }
  .copy-row { grid-template-columns:1fr; }
  .copy-row button { justify-self:start; }
}

@media (prefers-reduced-motion: no-preference) {
  button,
  nav a { transition:background .14s ease, border-color .14s ease, transform .14s ease; }
  button:active { transform:translateY(1px); }
}