/* =========================================================
   THEME TOKENS (ADMIN LOOK) - 1x in :root
   ========================================================= */
:root{
  --bg: #f6f8fc;
  --panel: #ffffff;
  --panel-2: #fbfcff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e6eaf2;

  --btn: #e8f0ff;
  --btn-hover: #dbe7ff;
  --danger: #fce7e7;

  --input-bg: #ffffff;
  --input-line: #d7deea;
  --focus: rgba(37, 99, 235, 0.25);

  --nav: 60px;
}

/* =========================================================
   GLOBALS (veilig, breekt niets)
   ========================================================= */
*{ box-sizing: border-box; }
html, body{ height:100%; margin:0; }
body{
  background: var(--bg);
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--text);
}

/* =========================================================
   ADMIN UI SCOPE
   Zet je app in <div class="admin-ui">...</div>
   ========================================================= */
.admin-ui{
  min-height: 100vh;
  font-family: 'Manrope', system-ui, sans-serif;
  background: radial-gradient(1200px 800px at 20% 0%, #eef4ff 0%, var(--bg) 45%, var(--bg) 100%);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.admin-ui,
.admin-ui button,
.admin-ui input,
.admin-ui select,
.admin-ui textarea,
.admin-ui table,
.load-students-modal,
.bx-modal {
  font-family: 'Manrope', system-ui, sans-serif;
}

.admin-ui a{ color: inherit; text-decoration: none; }

/* Layout */
.admin-ui .wrap{ display:flex; min-height:100vh; }

/* Sidebar */
.admin-ui .side{
  width: 296px;
  padding: 22px 18px;
  border-right: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.96) 100%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.7);
  transition: width .2s ease, padding .2s ease, transform .2s ease;
}

.admin-ui .side-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.admin-ui .brand{
  display:flex;
  align-items:center;
  font-weight: 700;
  letter-spacing: .14em;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text);
  font-family: 'Baloo 2', 'Manrope', system-ui, sans-serif;
}

.admin-ui .nav-icon{
  width: 24px;
  height: 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 8px;
  background: #eef4ff;
  border: 1px solid rgba(37, 99, 235, 0.12);
  color: #31589a;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}

.admin-ui .brand-text,
.admin-ui .nav-label{
  white-space: nowrap;
}

.admin-ui .side-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 38px;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 12px;
}

.admin-ui .side-toggle-floating{
  display:none;
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 40;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.admin-ui .side-toggle__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  height: 100%;
  letter-spacing: 0;
  line-height: 1;
  font-size: 14px;
  transform: translateY(-.5px);
}

.admin-ui .nav{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-ui .nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 11px 13px;
  border-radius: 14px;
  color: var(--muted);
  border: 1px solid transparent;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.admin-ui .nav a:hover{
  background: rgba(255,255,255,0.75);
  border-color: rgba(148, 163, 184, 0.18);
  color: #0f172a;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.admin-ui .nav a.active{
  color: var(--text);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-color: rgba(37, 99, 235, 0.16);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.admin-ui .nav a.active .nav-icon{
  background: #e6efff;
  border-color: rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
}

.admin-ui .wrap.nav-mode-icons .side{
  width: 104px;
  padding-left: 14px;
  padding-right: 14px;
}

.admin-ui .wrap.nav-mode-icons .brand-text,
.admin-ui .wrap.nav-mode-icons .nav-label{
  display:none;
}

.admin-ui .wrap.nav-mode-icons .brand{
  justify-content:center;
}

.admin-ui .wrap.nav-mode-icons .nav a{
  justify-content:center;
  padding-left: 10px;
  padding-right: 10px;
}

.admin-ui .wrap.nav-mode-collapsed .side{
  width: 0;
  padding: 22px 0;
  transform: translateX(-100%);
  overflow: hidden;
}

.admin-ui .wrap.nav-mode-collapsed .content{
  padding-left: 72px;
}

.admin-ui .wrap.nav-mode-collapsed .side-toggle-floating{
  display:inline-flex;
}
.admin-ui .nav-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-ui .nav-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 2px 4px 0;
}
/* Main content */
.admin-ui .content{
  flex: 1;
  padding: 28px;
}

.admin-ui .topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom: 22px;
  gap: 14px;
}

.admin-ui .h1{
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.04;
  font-family: 'Baloo 2', 'Manrope', system-ui, sans-serif;
}

.admin-ui .muted{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.admin-ui .pill{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
}

.admin-ui .admin-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255,255,255,0.9);
  color:#435267;
  font-size:12px;
  font-weight:700;
  line-height:1;
}

.admin-ui .admin-tag__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color:inherit;
}

.admin-ui .admin-tag__icon .ph{
  font-size:15px;
  line-height:1;
}

.admin-ui .admin-tag-stack{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.admin-ui .admin-tag--neutral{
  background:#fffaf2;
  border-color:rgba(191, 168, 138, 0.28);
  color:#6f5a43;
}

.admin-ui .admin-tag--role{
  background:#f8f5ff;
  border-color:rgba(164, 154, 220, 0.26);
  color:#57498b;
}

.admin-ui .admin-tag--self{
  background:#f6f8fb;
  border-color:rgba(148, 163, 184, 0.24);
  color:#5a6578;
}

.admin-ui .admin-tag--toggle{
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.admin-ui .admin-tag--toggle:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

.admin-ui .admin-tag--toggle.is-active{
  background:#eefbf3;
  border-color:rgba(120, 188, 146, 0.32);
  color:#216843;
}

.admin-ui .admin-tag--toggle.is-inactive{
  background:#f8fafc;
  border-color:rgba(148, 163, 184, 0.24);
  color:#64748b;
}

.admin-ui .admin-tag--toggle.is-warn,
.admin-ui .admin-tag--toggle.is-warning{
  background:#fff8e8;
  border-color:rgba(245, 158, 11, 0.48);
  color:#9a5b00;
  box-shadow:0 0 0 1px rgba(245, 158, 11, 0.08) inset;
}

.admin-ui .admin-tag--toggle.is-danger{
  background:#fff4f4;
  border-color:rgba(230, 149, 149, 0.30);
  color:#a23c3c;
}

.admin-ui .admin-tag--2fa.is-enabled,
.admin-ui .admin-tag--sync.is-ok{
  background:#eefbf3;
  border-color:rgba(120, 188, 146, 0.32);
  color:#216843;
}

.admin-ui .admin-tag--2fa.is-disabled,
.admin-ui .admin-tag--sync.is-idle{
  background:#f8fafc;
  border-color:rgba(148, 163, 184, 0.22);
  color:#64748b;
}

.admin-ui .admin-tag--sync.is-error{
  background:#fff4f4;
  border-color:rgba(230, 149, 149, 0.28);
  color:#a23c3c;
}

.admin-ui .admin-action-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.admin-ui .admin-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  min-width:38px;
  height:38px;
  padding:0;
  border-radius:12px;
}

.admin-ui .admin-icon-btn .ph{
  font-size:18px;
  line-height:1;
}

.admin-ui .admin-checktag{
  position:relative;
  display:inline-flex;
  cursor:pointer;
}

.admin-ui .admin-checktag input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.admin-ui .admin-checktag__ui{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:34px;
  min-width: 122px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(148, 163, 184, 0.22);
  background:#f8fafc;
  color:#64748b;
  font-size:12px;
  font-weight:700;
  line-height:1;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.admin-ui .admin-checktag__icon .ph{
  font-size:15px;
  line-height:1;
}

.admin-ui .admin-checktag__icon--on,
.admin-ui .admin-checktag__label--on{
  display:none;
}

.admin-ui .admin-checktag input:checked + .admin-checktag__ui{
  background:#eefbf3;
  border-color:rgba(120, 188, 146, 0.32);
  color:#216843;
  box-shadow: 0 6px 14px rgba(33, 104, 67, 0.08);
}

.admin-ui .admin-checktag input:checked + .admin-checktag__ui .admin-checktag__icon--on,
.admin-ui .admin-checktag input:checked + .admin-checktag__ui .admin-checktag__label--on{
  display:inline-flex;
}

.admin-ui .admin-checktag input:checked + .admin-checktag__ui .admin-checktag__icon--off,
.admin-ui .admin-checktag input:checked + .admin-checktag__ui .admin-checktag__label--off{
  display:none;
}

.admin-ui .admin-tag--live.is-present{
  background:#eefbf3;
  border-color:rgba(120, 188, 146, 0.32);
  color:#216843;
}

.admin-ui .admin-tag--live.is-away{
  background:#f8fafc;
  border-color:rgba(148, 163, 184, 0.22);
  color:#64748b;
}

.admin-ui .admin-live-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:var(--panel-2);
}

.admin-ui .admin-live-card.is-present{
  background:linear-gradient(135deg, rgba(238, 251, 243, 0.95), rgba(255, 253, 250, 0.95));
  border-color:rgba(120, 188, 146, 0.35);
  box-shadow:0 10px 24px rgba(33, 104, 67, 0.06);
}

/* Cards */
.admin-ui .card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.05),
    0 4px 10px rgba(15, 23, 42, 0.03);
}

.admin-ui .row{ display:flex; gap:14px; flex-wrap:wrap; }
.admin-ui .row > .card{ flex: 1 1 360px; }

/* Forms */
.admin-ui .field{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin: 10px 0;
}

.admin-ui input,
.admin-ui select{
  min-height: 44px;
  padding: 10px 13px;
  border-radius: 12px;
  border: 1px solid var(--input-line);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.admin-ui input:focus,
.admin-ui select:focus{
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 4px var(--focus);
}

.admin-ui select[multiple]{
  min-height: 148px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.admin-ui input:disabled,
.admin-ui select:disabled,
.admin-ui textarea:disabled{
  background:
    linear-gradient(180deg, #f7f9fc 0%, #f1f5f9 100%);
  border-color: #d9e2ec;
  color: #64748b;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
}

/* Buttons (scoped: raakt je .btn-primary niet) */
.admin-ui button{
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #d6e2ff;
  cursor: pointer;
  background: var(--btn);
  color: #1d4ed8;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .01em;
  transition: transform .04s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.10);
}

.admin-ui button:hover{ background: var(--btn-hover); }
.admin-ui button:active{ transform: translateY(1px); }

.admin-ui button:disabled,
.admin-ui .link-button-secondary.is-disabled,
.admin-ui .admin-btn.is-disabled{
  opacity: .48;
  cursor: not-allowed;
  box-shadow: none !important;
  filter: saturate(.7);
}

.admin-ui button:disabled:hover,
.admin-ui .link-button-secondary.is-disabled:hover,
.admin-ui .admin-btn.is-disabled:hover{
  background: inherit;
  transform: none;
}

.admin-ui button.secondary{
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.24);
  color: var(--text);
  box-shadow: none;
}

.admin-ui button.secondary:hover{
  background: #f8fafc;
  border-color: rgba(100, 116, 139, 0.26);
}

.admin-ui button.danger{
  background: var(--danger);
  border-color: #f5caca;
  color: #b42318;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.08);
}

.admin-ui .admin-btn,
.admin-ui a.admin-btn,
.admin-ui button.admin-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.admin-ui .admin-btn__glyph{
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  opacity: .78;
}

.admin-ui .admin-btn__glyph .ph,
.admin-ui .nav-icon .ph,
.admin-ui .side-toggle__icon .ph{
  font-size: 16px;
  line-height: 1;
}

.admin-ui .admin-btn--primary{
  background: #e8f0ff;
  border-color: #d3e1ff;
  color: #2859c5;
}

.admin-ui .admin-btn--primary:hover{
  background: #dce8ff;
}

.admin-ui .admin-btn--success{
  background: #ecf8f1;
  border-color: #cfe9d9;
  color: #1f7a46;
}

.admin-ui .admin-btn--success:hover{
  background: #e3f3ea;
}

.admin-ui .admin-btn--warn{
  background: #fff5ea;
  border-color: #f6dcc2;
  color: #b76a19;
}

.admin-ui .admin-btn--warn:hover{
  background: #feeedc;
}

.admin-ui .admin-btn--danger{
  background: #fceced;
  border-color: #f2d2d6;
  color: #b42318;
}

.admin-ui .admin-btn--danger:hover{
  background: #fae3e6;
}

.admin-ui .billing-history-subtle{
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  color: #64748b;
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.22);
}

.admin-ui .billing-history-subtle:hover{
  background: #f1f5f9;
}

.admin-ui .archive-period__label{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #7a8797;
}

.admin-ui .archive-period__value{
  font-size: 14px;
  font-weight: 700;
  color: #162132;
}

.admin-ui .archive-status-symbol{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #31589a;
}

.admin-ui .archive-summary-stack{
  display:grid;
  gap:8px;
}

.admin-ui .archive-summary-chip{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:8px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #e6edf5;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.admin-ui .archive-summary-chip__label,
.admin-ui .archive-metric-card__label{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7788;
}

.admin-ui .archive-summary-chip__value,
.admin-ui .archive-metric-card__value{
  font-size: 18px;
  line-height: 1;
  color: #0f172a;
}

.admin-ui .archive-summary-chip__meta,
.admin-ui .archive-metric-card__meta{
  font-size: 12px;
  color: #687588;
}

.admin-ui .archive-summary-chip.tone-blue,
.admin-ui .archive-metric-card.tone-blue{
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  border-color: #dfe9fb;
}

.admin-ui .archive-summary-chip.tone-red,
.admin-ui .archive-metric-card.tone-red{
  background: linear-gradient(180deg, #fffefe 0%, #fff4f4 100%);
  border-color: #f3dddd;
}

.admin-ui .archive-summary-chip.tone-orange,
.admin-ui .archive-metric-card.tone-orange{
  background: linear-gradient(180deg, #fffdfa 0%, #fff5ea 100%);
  border-color: #f1dfc8;
}

.admin-ui .archive-summary-chip.tone-sand,
.admin-ui .archive-metric-card.tone-sand{
  background: linear-gradient(180deg, #fffefc 0%, #fbf7ef 100%);
  border-color: #ece3d1;
}

.admin-ui .archive-overview-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}

.admin-ui .archive-metric-card{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #e6edf5;
}

.admin-ui .archive-action-btn{
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
}

.admin-ui .archive-action-btn .admin-btn__glyph{
  width: 14px;
  font-size: 12px;
}

.admin-ui .archive-action-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.admin-ui .archive-inline-details{
  margin-top: 8px;
}

.admin-ui .archive-inline-details summary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  list-style:none;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.admin-ui .archive-inline-details summary::-webkit-details-marker{
  display:none;
}

.admin-ui .archive-inline-details[open] summary{
  background: #f1f5f9;
  border-color: rgba(148, 163, 184, 0.28);
  color: #334155;
}

.admin-ui .archive-inline-details__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.admin-ui .archive-state-notice{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid #e6edf5;
}

.admin-ui .archive-state-notice.is-blocked{
  background: linear-gradient(180deg, #fff8f1 0%, #fff3e8 100%);
  border-color: #f3dcc4;
  color: #9a4f14;
}

.admin-ui .archive-state-notice.is-ready{
  background: linear-gradient(180deg, #f6fbff 0%, #eef5ff 100%);
  border-color: #d9e6fb;
  color: #31589a;
}

.admin-ui .billing-diagnose-summary{
  padding:14px;
  border-radius:16px;
  border:1px solid #e6edf5;
  background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.admin-ui .billing-diagnose-summary__header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.admin-ui .billing-diagnose-summary__title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7788;
}

.admin-ui .billing-diagnose-summary__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  margin-top:12px;
}

.admin-ui .billing-diagnose-summary__card{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #e6edf5;
  background:#fff;
}

.admin-ui .billing-diagnose-summary__card.tone-info{
  background:linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  border-color:#dfe9fb;
}

.admin-ui .billing-diagnose-summary__card.tone-warm{
  background:linear-gradient(180deg, #fffdfa 0%, #fff5ea 100%);
  border-color:#f1dfc8;
}

.admin-ui .billing-diagnose-summary__card.tone-danger{
  background:linear-gradient(180deg, #fffefe 0%, #fff4f4 100%);
  border-color:#f3dddd;
}

.admin-ui .billing-diagnose-summary__count{
  font-size:22px;
  font-weight:800;
  line-height:1;
  color:#162132;
}

.admin-ui .billing-diagnose-summary__label{
  margin-top:6px;
  font-size:13px;
  color:#475569;
  line-height:1.45;
}

.location-exception-checklist-wrap{
  max-height:320px;
  overflow:auto;
  padding:8px;
  border:1px solid #e6edf5;
  border-radius:14px;
  background:linear-gradient(180deg, #fcfdff 0%, #f7f9fc 100%);
}

.location-exception-checklist{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.location-exception-checklist__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#fff;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.location-exception-checklist__item:hover{
  border-color:#cbd5e1;
  background:#fbfdff;
  box-shadow:0 6px 16px rgba(15, 23, 42, 0.05);
}

.location-exception-checklist__item input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}

.location-exception-checklist__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  flex:0 0 auto;
  border-radius:999px;
  border:1px solid #d8e1ec;
  background:#f8fafc;
  color:transparent;
  font-size:12px;
  line-height:1;
}

.location-exception-checklist__icon .ph{
  font-size:12px;
}

.location-exception-checklist__copy{
  display:grid;
  gap:4px;
  min-width:0;
}

.location-exception-checklist__copy strong{
  color:#162132;
}

.location-exception-checklist__item:has(input:checked){
  border-color:#c9daf7;
  background:#f4f8ff;
  box-shadow:0 8px 18px rgba(49, 88, 154, 0.08);
}

.location-exception-checklist__item:has(input:checked) .location-exception-checklist__icon{
  border-color:#31589a;
  background:#31589a;
  color:#fff;
}

.admin-ui .analytics-metrics-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}

.admin-ui .analytics-metric-card{
  padding:14px;
  border-radius:16px;
  border:1px solid #e6edf5;
  background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.admin-ui .analytics-metric-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7788;
}

.admin-ui .analytics-metric-value{
  margin-top:8px;
  font-size:28px;
  font-weight:800;
  line-height:1.05;
  color:#162132;
}

.admin-ui .analytics-metric-note{
  margin-top:6px;
  font-size:12px;
  color:#6b7788;
}

.admin-ui .analytics-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
}

.admin-ui .analytics-panel{
  padding:18px;
}

.admin-ui .analytics-panel-title{
  font-size:20px;
  margin-bottom:4px;
}

.admin-ui .analytics-bars{
  display:grid;
  gap:10px;
}

.admin-ui .analytics-bar-row{
  display:grid;
  grid-template-columns: minmax(120px, 1fr) minmax(160px, 3fr) auto;
  gap:12px;
  align-items:center;
}

.admin-ui .analytics-bar-label,
.admin-ui .analytics-bar-value{
  font-size:13px;
  color:#24364a;
}

.admin-ui .analytics-bar-track{
  height:12px;
  border-radius:999px;
  background:#edf2f7;
  overflow:hidden;
}

.admin-ui .analytics-bar-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #31589a, #6fa2ff);
}

.admin-ui .analytics-day-chart{
  height:240px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(22px, 1fr));
  gap:6px;
  align-items:end;
}

.admin-ui .analytics-chart-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:8px;
  scrollbar-gutter: stable both-edges;
}

.admin-ui .analytics-day-col{
  min-width:0;
}

.admin-ui .analytics-day-bar-wrap{
  height:200px;
  display:flex;
  align-items:flex-end;
}

.admin-ui .analytics-day-bar{
  width:100%;
  min-height:8px;
  border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg, #5b8def 0%, #31589a 100%);
}

.admin-ui .analytics-day-bar--empty{
  min-height:0;
  background:transparent;
}

.admin-ui .analytics-day-label{
  margin-top:6px;
  min-height:14px;
  font-size:10px;
  color:#6b7788;
  text-align:center;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}

.admin-ui .analytics-day-chart--dates .analytics-day-label{
  font-size:10px;
  line-height:1.2;
}

.admin-ui .analytics-day-chart--hours .analytics-day-label{
  font-size:10px;
}

@media (max-width: 1100px){
  .admin-ui .analytics-metrics-grid,
  .admin-ui .analytics-grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px){
  .location-exception-checklist{
    grid-template-columns:1fr;
  }

  .admin-ui .analytics-metrics-grid,
  .admin-ui .analytics-grid{
    grid-template-columns: 1fr;
  }

  .admin-ui .analytics-bar-row{
    grid-template-columns: 1fr;
    gap:6px;
  }
}

.admin-ui .billing-setup-shell{
  padding: 22px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(226, 238, 255, 0.95) 0, rgba(226, 238, 255, 0.0) 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.admin-ui .billing-setup-shell::before{
  content: "";
  position: absolute;
  right: -42px;
  top: -36px;
  width: 180px;
  height: 180px;
  border-radius: 40px;
  background:
    radial-gradient(circle, rgba(255,255,255,.72) 0 18%, transparent 19% 100%);
  background-size: 18px 18px;
  opacity: .42;
  pointer-events: none;
}

.admin-ui .billing-setup-intro{
  max-width: 56ch;
  position: relative;
  z-index: 1;
}

.admin-ui .billing-step-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .92fr) minmax(280px, .92fr);
  gap:16px;
  align-items:start;
  position: relative;
  z-index: 1;
}

.admin-ui .billing-simple-card{
  padding: 18px;
  border-radius: 18px;
  border: 1px solid #e4ebf6;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(249,251,255,0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  position: relative;
  z-index: 1;
}

.admin-ui .billing-step-card{
  padding: 18px;
  border-radius: 18px;
  border: 1px solid #e7edf5;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.admin-ui .billing-step-card--accent{
  background:
    linear-gradient(180deg, rgba(245, 248, 253, 0.98) 0%, rgba(238, 244, 255, 0.98) 100%);
  border-color: #dce8fb;
}

.admin-ui .billing-step-card--soft{
  background:
    linear-gradient(180deg, rgba(252, 253, 255, 0.98) 0%, rgba(247, 250, 254, 0.98) 100%);
}

.admin-ui .billing-step-card__top{
  max-width: 44ch;
}

.admin-ui .billing-step-kicker{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #7b8796;
}

.admin-ui .billing-primary-strip{
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(244, 248, 255, 1) 100%);
  border: 1px solid #dbe6f8;
  display: grid;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

.admin-ui .billing-primary-strip button{
  justify-self: start;
}

.admin-ui .billing-quiet-note{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e7edf5;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.admin-ui .billing-archive-link{
  margin-top: 12px;
}

.admin-ui .billing-advanced-panel{
  margin-top: 14px;
  border: 1px solid #e7edf5;
  border-radius: 16px;
  background: #fbfcfe;
}

.admin-ui .billing-advanced-panel summary{
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  font-weight: 700;
}

.admin-ui .billing-advanced-panel summary::-webkit-details-marker{
  display:none;
}

.admin-ui .billing-advanced-panel__body{
  padding: 0 16px 16px;
}

@media (max-width: 980px){
  .admin-ui .billing-step-grid{
    grid-template-columns: 1fr;
  }

  .admin-ui .archive-overview-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .admin-ui .archive-overview-grid{
    grid-template-columns: 1fr;
  }
}

.admin-ui a.admin-btn.link-button-secondary.admin-btn--success,
.admin-ui a.admin-btn.link-button-secondary.admin-btn--warn,
.admin-ui a.admin-btn.link-button-secondary.admin-btn--primary{
  box-shadow: none;
}

.admin-ui .billing-line-row.is-excluded td{
  background: rgba(252, 241, 241, 0.72);
}

.admin-ui .billing-line-action{
  min-width: 112px;
}

.billing-lock-banner{
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
  border: 1px solid #dde6f2;
}

.billing-lock-banner__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.billing-lock-banner__top--inline{
  align-items: center;
  justify-content: flex-start;
  gap: 10px 14px;
}

.billing-lock-banner__item{
  color: var(--text);
  font-size: 14px;
}

.billing-filter-grid{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.billing-filter-field{
  position:relative;
  padding: 9px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
  border: 1px solid #e8edf5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.billing-filter-field .field{
  gap: 4px;
}

.billing-filter-field .field label{
  min-height: 18px;
}

.billing-filter-field input,
.billing-filter-field select,
.billing-filter-field .billing-multi-select__toggle{
  min-height: 40px;
}

.billing-filter-field.is-locked{
  background: linear-gradient(180deg, rgba(248,250,252,.96) 0%, rgba(241,245,249,.96) 100%);
  border: 1px solid #e2e8f0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.billing-filter-field.is-locked::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

.billing-lock-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height: 1.15;
}

.billing-lock-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef4ff;
  border: 1px solid #dbe7ff;
  color: #4a6494;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.billing-multi-select{
  position: relative;
}

.billing-multi-select__toggle{
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid #d8e2ee;
  background: #fff;
  color: var(--text);
  font: inherit;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.billing-multi-select__toggle:hover{
  border-color: #c9d6e6;
  background: #fbfcfe;
}

.billing-multi-select__chevron{
  color: var(--muted);
  font-size: 12px;
  flex: 0 0 auto;
}

.billing-multi-select__menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 25;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid #dde6f2;
  background: #fff;
  box-shadow: 0 18px 38px rgba(15,23,42,.12);
}

.billing-multi-select__actions{
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.billing-multi-select__action{
  padding: 6px 9px;
  font-size: 11px;
}

.billing-multi-select__options{
  display: grid;
  gap: 3px;
  max-height: 180px;
  overflow: auto;
  padding-right: 2px;
}

.billing-multi-select__option{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.1;
}

.billing-multi-select__option--button{
  width: 100%;
  font: inherit;
  text-align: left;
}

.billing-multi-select__option:hover{
  background: #f3f7fb;
  border-color: #dce7f3;
}

.billing-multi-select__option.is-selected{
  background: #edf4ff;
  border-color: #cfe0f7;
}

.billing-multi-select__option input{
  margin: 0;
  flex: 0 0 auto;
  transform: scale(.9);
}

.billing-adjust-modal__grid{
  display: grid;
  gap: 12px;
}

.billing-adjust-modal__field{
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #e7edf5;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.billing-adjust-modal__context{
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #dde6f2;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%);
}

.billing-adjust-modal__context-label{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b;
}

.billing-adjust-modal__context-value{
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.billing-adjust-modal__note{
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

.billing-adjust-modal__info{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e6edf5;
  background: #f8fafc;
  color: #526171;
  font-size: 12px;
  line-height: 1.55;
}

.load-students-modal .billing-lock-label{
  margin-bottom: 8px;
}

.load-students-modal input,
.load-students-modal select{
  width: 100%;
}

.user-admin-modal{
  width: min(680px, 94vw);
}

.user-admin-modal__select{
  min-height: 38px;
  padding: 7px 10px;
  font-size: 13px;
}

.user-admin-modal__institutions{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:8px;
}

.user-admin-modal__institution-option{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  font-size:13px;
}

.user-admin-modal__institution-option input{
  width:auto;
  min-height:auto;
  margin:0;
}

.billing-adjust-modal__locked{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

/* Tables */
.admin-ui table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.admin-ui th,
.admin-ui td{
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  padding: 12px 10px;
  text-align: left;
  font-size: 14px;
  vertical-align: middle;
}

.admin-ui th{
  color: #475569;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: #f8fafc;
}

.admin-ui tbody tr:hover{ background: rgba(248, 250, 252, 0.95); }

.admin-ui .error{
  color: #b91c1c;
  font-size: 13px;
  min-height: 18px;
}

/* Switch */
.admin-ui .switch{
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
}

.admin-ui .switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

.admin-ui .slider{
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #e5e7eb;
  border-radius: 999px;
  transition: background-color .2s ease;
  border: 1px solid #d7deea;
}

.admin-ui .slider:before{
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  top: 2px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  transition: transform .2s ease;
}

.admin-ui .switch input:checked + .slider{
  background-color: #2563eb;
  border-color: #2563eb;
}

.admin-ui .switch input:checked + .slider:before{
  transform: translateX(18px);
}

.admin-ui .switch-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================
   BESTAANDE APP CSS (behoud structuur)
   ========================================================= */

/* Home */
.home-hero-icon{
  width: 3.5rem;
  height: 3.5rem;
  background: rgba(37, 99, 235, 0.08);
  color: var(--btn);
  font-size: 1.8rem;
}

.home-card{ border-radius: 0.8rem; }

.home-card .card-body{
  padding: 1rem 1.1rem;
}

@media (min-width: 768px) {
  .home-card .card-body{
    padding: 1.25rem 1.5rem;
  }
}

/* Bottom tabs */
.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  height: var(--nav);
  background: var(--panel);
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-around;
  align-items:center;
  box-shadow:0 -1px 5px rgba(15,23,42,.08);
  z-index:1001;
  transition:opacity .25s;
}

.bottom-nav.hidden{ opacity:0; pointer-events:none; }

.bottom-nav button{
  background:none;
  border:0;
  font-size:1.1rem;
  color: var(--muted);
  box-shadow: none; /* voorkomt admin shadow op nav-buttons */
  padding: 0;       /* voorkomt admin padding op nav-buttons */
  border-radius: 0; /* clean */
  font-weight: 600; /* iets lichter */
}

.bottom-nav button.active{ color: var(--btn); }

/* Splash screen (optioneel) */
.splash-screen{
  min-height: 100vh;
  background: radial-gradient(circle at top, #f8f9fa, #e9ecef);
  text-align: center;
}

.splash-text{
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.splash-icon{
  animation: splash-bounce 1.2s ease-in-out infinite;
}

@keyframes splash-bounce{
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
  60% { transform: translateY(0); }
}

.splash-dots{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  width: 0;
  animation: splash-dots 1s steps(3, end) infinite;
}

.splash-dots::before{ content: '...'; }

@keyframes splash-dots{
  0% { width: 0; }
  100% { width: 1.2em; }
}

/* Splash / PIN overlays */
#splash, #pinScreen{
  position:fixed;
  inset:0;
  background:#0d6efd;
  color:#fff;
  z-index:2000;
  transition:opacity .25s;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

#splash.hidden, #pinScreen.hidden{
  opacity:0;
  pointer-events:none;
}

.pin-dots{
  font-size:2rem;
  letter-spacing:.5rem;
  margin-bottom:1rem;
}

.pin-grid{
  display:grid;
  grid-template-columns:repeat(3,72px);
  gap:12px;
  justify-content:center;
}

.pin-device-id{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  max-width:min(90vw, 420px);
  padding:0 12px;
  text-align:center;
  font-size:11px;
  letter-spacing:.04em;
  color:rgba(255,255,255,0.58);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}

.pin-key{
  width:60px;
  height:60px;
  border-radius:50%;
  font-size:1.4rem;
}

/* Scanner overlay */
#scanOverlay{
  position:fixed;
  inset:0;
  background:#000;
  display:none;
  z-index:1000;
}

#scannerWrap{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  padding-bottom:calc(var(--nav) + 6px);
  box-sizing:border-box;
}

#scanner{
  position:relative;
  border:10px solid transparent;
  transition:border-color 120ms;
  max-width:92vw;
  max-height:calc(100vh - var(--nav) - 12px);
  aspect-ratio:16/9;
  height:calc(100vh - var(--nav) - 12px);
  width:auto;
  background:#000;
  box-sizing:border-box;
}

#scanner.scanner-calm::after{
  content:'';
  position:absolute;
  inset:14%;
  border:3px solid rgba(255,255,255,0.78);
  border-radius:22px;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,0.12) inset,
    0 0 0 1px rgba(255,255,255,0.08);
  pointer-events:none;
}

#scanner.scanner-calm::before{
  content:'Richt de barcode binnen dit kader';
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  padding:8px 12px;
  border-radius:999px;
  background:rgba(17,24,39,0.7);
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  pointer-events:none;
}

#scanner video,
#scanner canvas{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block;
}

#scanner canvas.drawingBuffer{
  position:absolute;
  left:0; top:0;
  pointer-events:none;
}

.scan-debug-toggle{
  position:absolute;
  top:16px;
  right:16px;
  z-index:1002;
  min-height:40px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:14px;
  background:rgba(20,24,31,0.72);
  color:#fff;
  font-weight:800;
  backdrop-filter:blur(10px);
}

.scan-debug-panel{
  position:absolute;
  left:12px;
  right:12px;
  bottom:calc(var(--nav) + 14px);
  z-index:1002;
  max-height:38vh;
  padding:12px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:18px;
  background:rgba(13,17,23,0.88);
  color:#f8fafc;
  backdrop-filter:blur(12px);
  box-shadow:0 14px 30px rgba(0,0,0,0.28);
}

.scan-debug-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.scan-debug-panel__actions{
  display:flex;
  gap:8px;
}

.scan-debug-panel__actions button{
  min-height:32px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  color:#fff;
  font-size:12px;
  font-weight:700;
}

.scan-debug-panel__log{
  margin:0;
  max-height:calc(38vh - 56px);
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  line-height:1.45;
}

/* List items + flash */
.list-item{
  padding:.5rem .75rem;
  background:#fff;
  border:1px solid #eee;
  border-radius:.5rem;
  margin-bottom:.5rem;
  position:relative;
  transition:background-color .6s, transform .2s;
  touch-action:pan-y;
}

.flash-add{
  background:#eafaf0;
  animation:fadeOutBg 3s forwards;
}

@keyframes fadeOutBg{
  0%{ background:#eafaf0; }
  100%{ background:#fff; }
}

/* Undo bar */
#undoBar{
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(var(--nav) + 12px);
  background:#212529;
  color:#fff;
  border-radius:.75rem;
  padding:.6rem .8rem;
  display:none;
  align-items:center;
  justify-content:space-between;
  z-index:1100;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

#undoBar.show{ display:flex; }

#undoBar .undo-btn{
  border:0;
  background:transparent;
  color:#0d6efd;
  font-weight:600;
}

/* Auth status container */
#authStatusContainer{
  padding:12px 16px;
  background:#f8f9fa;
  border-bottom:1px solid #eee;
}

/* Loading overlay */
.loading-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-overlay.hidden{ display: none; }

.loading-overlay__center{
  background: #fff;
  padding: 2rem 2.5rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.loading-spinner{
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem auto;
  border-radius: 50%;
  border: 4px solid #ddd;
  border-top-color: #007bff;
  animation: spin 0.8s linear infinite;
}

@keyframes spin{
  to { transform: rotate(360deg); }
}

/* First run */
.first-run{
  max-width: 480px;
  margin: 4rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.first-run h1{
  margin-bottom: 1rem;
  font-size: 1.6rem;
}

.first-run p{ margin-bottom: 1.5rem; }

.btn-primary{
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: none;
  background: #007bff;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

/* =========================================================
   MODAL (1x, definitief)
   - niet scoped, zodat hij altijd werkt (ook buiten admin-ui)
   - hoogste z-index zodat hij boven splash/pin komt
   ========================================================= */
.load-students-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 99999;
}

.load-students-modal{
  width: min(560px, 94vw);
  max-height: min(80vh, 720px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
}

 .bx-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .42);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        z-index: 2000;
      }

      .bx-modal {
        width: min(980px, 96vw);
        max-height: 92vh;
        overflow: auto;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: 0 24px 80px rgba(0,0,0,.22);
        padding: 18px;
      }

      .bx-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 14px;
      }

      .bx-section {
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
      }

      .bx-section-title {
        font-size: 16px;
        font-weight: 800;
        margin-bottom: 4px;
      }

      .bx-section-sub {
        color: var(--muted);
        margin-bottom: 10px;
      }

      .bx-student-search-wrap {
        position: relative;
      }

      .bx-student-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.admin-ui .bx-student-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff !important;
  color: var(--text) !important;
  cursor: pointer;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}

.admin-ui .bx-student-option:last-child {
  border-bottom: 0;
}

.admin-ui .bx-student-option:hover,
.admin-ui .bx-student-option.active {
  background: #f5f7fb !important;
  color: var(--text) !important;
}

.admin-ui .bx-student-option .bx-student-name {
  font-weight: 700;
  color: var(--text);
}

.admin-ui .bx-student-option .bx-student-meta {
  font-size: 12px;
  color: var(--muted) !important;
  margin-top: 2px;
}


.bx-selected-box {
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  display: flex;
  align-items: center;
}

.bx-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.bx-chip-main {
  min-width: 0;
  flex: 1 1 auto;
}

.bx-chip-name {
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.bx-chip-meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
  margin-top: 3px;
}

.admin-ui .bx-chip-remove {
  background: transparent !important;
  color: #7a7a7a !important;
  box-shadow: none !important;
  border: 0 !important;
}

.admin-ui .bx-chip-remove:hover {
  background: #f1f3f5;
  color: #444;
}

      .bx-locations-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 8px;
      }

      .bx-location-option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--panel);
      }

      .bx-help {
        color: var(--muted);
        font-size: 12px;
        margin-top: 4px;
      }

      .bx-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 16px;
      }

      .bx-table-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
      }

      .bx-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border: 1px solid var(--line);
        border-radius: 999px;
        font-size: 12px;
        background: var(--panel-2);
      }

      .bx-empty {
        padding: 14px;
        border: 1px dashed var(--line);
        border-radius: 12px;
        color: var(--muted);
        background: var(--panel-2);
      }

      mark {
        background: rgba(255, 214, 10, .35);
        padding: 0 1px;
      }

      #selectedStudentBox {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

#selectedStudentBox .bx-chip {
  width: 100%;
}
.admin-ui a.link-button-secondary,
.admin-ui .link-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, transform .04s ease;
}

.admin-ui a.link-button-secondary:hover,
.admin-ui .link-button-secondary:hover {
  background: #f8fafc;
  border-color: var(--input-line);
}

.admin-ui a.link-button-secondary:active,
.admin-ui .link-button-secondary:active {
  transform: translateY(1px);
}

/* =========================================================
   REPORT / PRINT - STUDENT PERIOD REPORT
   ========================================================= */

.admin-ui .report-sheet{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.06),
    0 2px 6px rgba(15, 23, 42, 0.04);
}

.admin-ui .report-head{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.admin-ui .report-head-right{
  text-align: right;
}

.admin-ui .report-title{
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.admin-ui .report-sub{
  color: var(--muted);
}

.admin-ui .meta-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px 18px;
  margin: 18px 0 22px;
}

.admin-ui .meta-card{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: var(--panel-2);
}

.admin-ui .meta-label{
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 4px;
}

.admin-ui .meta-value{
  font-size: 15px;
  font-weight: 600;
}

.admin-ui .totals{
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 18px;
}

.admin-ui .total-card{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  background: var(--panel-2);
}

.admin-ui .total-number{
  font-size: 22px;
  font-weight: 800;
}

.admin-ui .total-label{
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.admin-ui .status-ok{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #e8f7e8;
  color: #166534;
  border: 1px solid #cce9cf;
}

.admin-ui .status-corrected{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #fff3e7;
  color: #9a4f14;
  border: 1px solid #f3d6bb;
}

.admin-ui .status-excluded{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #fdeaea;
  color: #991b1b;
  border: 1px solid #f4caca;
}

.admin-ui .muted-small{
  font-size: 12px;
  color: var(--muted);
}

.admin-ui .report-table-wrap{
  overflow: auto;
}

.admin-ui .admin-print-sheet{
  background: var(--panel);
}

.admin-ui .admin-evac-table td:first-child,
.admin-ui .admin-evac-table th:first-child{
  min-width: 220px;
}

.admin-ui .admin-evac-table td:nth-child(2),
.admin-ui .admin-evac-table th:nth-child(2){
  min-width: 150px;
}

.admin-ui table.report-table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.admin-ui table.report-table th,
.admin-ui table.report-table td{
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
  font-size: 14px;
  vertical-align: top;
}

.admin-ui table.report-table th{
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.admin-ui .print-footer{
  margin-top: 18px;
  font-size: 12px;
  color: var(--muted);
}

/* =========================================================
   PRINT
   ========================================================= */
/* =========================================================
   STUDENT PERIOD REPORT - PRINT ULTRA COMPACT
   ========================================================= */

.admin-ui .print-only-col {
  display: none;
}

.admin-ui .screen-only-col {
  display: table-cell;
}

.admin-ui .screen-only-inline {
  display: block;
}

.admin-ui .report-sheet-print-compact .meta-card,
.admin-ui .report-sheet-print-compact .total-card {
  transition: none;
}

@media print {
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  html, body {
    background: #fff !important;
  }

  body * {
    visibility: hidden;
  }

  .admin-ui #printableLiveList,
  .admin-ui #printableLiveList *,
  .admin-ui .report-sheet,
  .admin-ui .report-sheet * {
    visibility: visible;
  }

  .admin-ui .side,
  .admin-ui .topbar,
  .admin-ui .no-print,
  .admin-ui button,
  .admin-ui .content > .topbar,
  .admin-ui #msg {
    display: none !important;
  }

  .admin-ui .wrap,
  .admin-ui .content {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
  }

  .admin-ui .content {
    background: #fff !important;
  }

  .admin-ui #reportWrap,
  .admin-ui #resultsWrap {
    margin: 0 !important;
    padding: 0 !important;
  }

  .admin-ui #printableLiveList,
  .admin-ui .report-sheet {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .admin-ui .print-only-col {
    display: table-cell !important;
  }

  .admin-ui .screen-only-col,
  .admin-ui .screen-only-inline {
    display: none !important;
  }

  .admin-ui .report-sheet-print-compact {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  .admin-ui .report-sheet-print-compact .report-table-wrap{
    overflow: visible !important;
  }

  .admin-ui .report-head-print-compact {
    margin-bottom: 6px !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  .admin-ui .report-title {
    font-size: 15pt !important;
    margin-bottom: 1px !important;
    line-height: 1.1 !important;
  }

  .admin-ui .report-sub {
    font-size: 9pt !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    color: #444 !important;
  }

  .admin-ui .report-head-right {
    font-size: 9pt !important;
    line-height: 1.2 !important;
    color: #222 !important;
  }

  .admin-ui .report-meta-print-compact {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    margin: 4px 0 6px !important;
  }

  .admin-ui .report-meta-print-compact .meta-card {
    padding: 4px 6px !important;
    border: 1px solid #999 !important;
    border-radius: 0 !important;
    background: #fff !important;
    min-height: auto !important;
  }

  .admin-ui .report-meta-print-compact .meta-label {
    font-size: 7pt !important;
    line-height: 1.1 !important;
    margin-bottom: 1px !important;
    color: #555 !important;
  }

  .admin-ui .report-meta-print-compact .meta-value {
    font-size: 9pt !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
  }

  .admin-ui .report-totals-print-compact {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 4px !important;
    margin: 0 0 6px !important;
  }

  .admin-ui .report-totals-print-compact .total-card {
    padding: 4px 5px !important;
    border: 1px solid #999 !important;
    border-radius: 0 !important;
    background: #fff !important;
    min-height: auto !important;
  }

  .admin-ui .report-totals-print-compact .total-number {
    font-size: 10pt !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  .admin-ui .report-totals-print-compact .total-label {
    font-size: 7pt !important;
    line-height: 1.05 !important;
    margin-top: 1px !important;
    color: #555 !important;
    letter-spacing: 0 !important;
  }

  .admin-ui .report-table-print-compact {
    margin-top: 4px !important;
    width: 100% !important;
    border-collapse: collapse !important;
  }

  .admin-ui .report-table-print-compact th,
  .admin-ui .report-table-print-compact td {
    border: 1px solid #888 !important;
    padding: 3px 4px !important;
    font-size: 8pt !important;
    line-height: 1.1 !important;
    vertical-align: top !important;
    background: #fff !important;
  }

  .admin-ui .report-table-print-compact th {
    font-size: 7pt !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    color: #222 !important;
    padding: 3px 4px !important;
  }

  .admin-ui .report-table-print-compact td br {
    display: none;
  }

  .admin-ui .report-table-print-compact td,
  .admin-ui .report-table-print-compact th {
    white-space: nowrap;
  }

  .admin-ui .report-table-print-compact td:nth-child(2) {
    white-space: normal;
  }

  .admin-ui .admin-evac-table th,
  .admin-ui .admin-evac-table td{
    font-size: 8pt !important;
  }

  .admin-ui .admin-evac-table td:first-child,
  .admin-ui .admin-evac-table th:first-child{
    width: 32% !important;
  }

  .admin-ui .admin-evac-table td:nth-child(2),
  .admin-ui .admin-evac-table th:nth-child(2){
    width: 20% !important;
  }

  .admin-ui .status-ok,
  .admin-ui .status-corrected,
  .admin-ui .status-excluded {
    display: inline !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #000 !important;
    border-radius: 0 !important;
    font-size: 8pt !important;
    font-weight: 700 !important;
  }

  .admin-ui .print-footer {
    margin-top: 5px !important;
    font-size: 7pt !important;
    color: #555 !important;
  }
}
/* =========================================================
   FRONTEND APP REDESIGN
   ========================================================= */
 .frontend-app {
  --app-bg: #fff5d8;
  --app-bg-2: #ffe9d6;
  --app-panel: rgba(255,255,255,0.76);
  --app-panel-solid: #fffdf8;
  --app-line: rgba(122, 88, 43, 0.13);
  --app-text: #24324a;
  --app-muted: #6f7387;
  --app-accent: #ff8a3d;
  --app-accent-2: #33b7a5;
  --app-accent-3: #7d67ff;
  --app-accent-4: #ffcf5a;
  --app-shadow: 0 20px 52px rgba(183, 119, 49, 0.16);
 min-height: 100vh;
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--app-text);
  background:
    radial-gradient(circle at top left, rgba(250, 204, 21, 0.30), transparent 30%),
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.18), transparent 28%),
    linear-gradient(180deg, var(--app-bg) 0%, var(--app-bg-2) 100%);
  padding-top: env(safe-area-inset-top, 0px);
}

.frontend-app::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.35), transparent 70%);
}

.frontend-app #app.container {
  width: min(100%, 980px);
  padding: 18px 18px calc(var(--nav) + env(safe-area-inset-bottom, 0px) + 34px);
}

.frontend-app .card,
.frontend-app .app-surface,
.frontend-app .load-students-modal,
.frontend-app .loading-overlay__center,
.frontend-app .modal-content {
  background: var(--app-panel);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--app-line);
  border-radius: 24px;
  box-shadow: var(--app-shadow);
}

.frontend-app .app-page {
  display: grid;
  gap: 18px;
}

.frontend-app .app-topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
}

.frontend-app .app-topbar-compact {
  gap: 12px;
  align-items: center;
}

.frontend-app .app-topbar-simple {
  align-items: center;
}

.frontend-app .app-topbar-titleblock {
  min-width: 0;
}

.frontend-app .app-topbar-stack {
  align-items: start;
}

.frontend-app .app-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(217, 119, 6, 0.9);
}

.frontend-app .app-page-title {
  margin: 0;
  font-family: 'Baloo 2', 'Manrope', system-ui, sans-serif;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
}

.frontend-app .app-page-title-compact {
  font-size: clamp(24px, 3.8vw, 34px);
  line-height: 1;
  color: #1f2937;
}

.frontend-app .app-page-subtitle,
.frontend-app .app-section-copy,
.frontend-app .app-setting-copy,
.frontend-app .app-stat-note,
.frontend-app .app-mini-stat-label,
.frontend-app .app-list-meta,
.frontend-app .app-field-help {
  color: var(--app-muted);
}

.frontend-app .app-page-subtitle {
  margin: 8px 0 0;
  max-width: 62ch;
}

.frontend-app .app-surface-compact {
  padding: 14px 16px;
}

.frontend-app .app-surface-simple {
  padding: 12px 14px;
  background: rgba(252,250,246,0.96);
  border: 1px solid rgba(110,92,68,0.18);
  box-shadow: 0 8px 18px rgba(72,52,32,0.06);
}

.frontend-app .app-hero-panel {
  display: grid;
  grid-template-columns: 1.3fr .8fr;
  gap: 16px;
  padding: 22px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.82), rgba(255,248,235,0.7)),
    linear-gradient(135deg, rgba(217,119,6,0.08), rgba(15,118,110,0.08));
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: var(--app-shadow);
}

.frontend-app .app-hero-panel-compact {
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(253,249,242,0.98), rgba(246,241,232,0.96));
  border-color: rgba(110,92,68,0.18);
  box-shadow: 0 10px 24px rgba(72,52,32,0.08);
}

.frontend-app .app-hero-side {
  display: grid;
  gap: 12px;
  justify-items: end;
  align-content: center;
}

.frontend-app .app-device-pill {
  min-width: 180px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(110,92,68,0.16);
}

.frontend-app .app-hero-panel-compact .app-device-pill {
  min-width: 128px;
  padding: 10px 12px;
  border-radius: 14px;
}

.frontend-app .app-device-pill-label,
.frontend-app .app-stat-label,
.frontend-app .app-input-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(107,114,128,.9);
}

.frontend-app .app-device-orb {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  color: #fff7ed;
  font-size: 34px;
  background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2));
  box-shadow: 0 20px 36px rgba(217,119,6,.28);
}

.frontend-app .app-inline-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #f4efe7;
  border: 1px solid rgba(110,92,68,0.14);
  color: #4b5b56;
}

.frontend-app .app-stat-grid,
.frontend-app .app-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.frontend-app .app-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frontend-app .app-stat-card,
.frontend-app .app-info-card,
.frontend-app .app-surface {
  padding: 20px;
}

.frontend-app .app-surface-tight {
  padding: 12px 14px;
}

.frontend-app .app-stat-card {
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.frontend-app .app-stat-grid {
  gap: 12px;
}

.frontend-app .app-stat-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(110,92,68,0.16);
  box-shadow: 0 8px 20px rgba(72,52,32,0.07);
}

.frontend-app .app-stat-card::after {
  content: '';
  position: absolute;
  inset: auto -20% -38% auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  filter: blur(14px);
}

.frontend-app .app-stat-card.tone-blue { background: linear-gradient(160deg, #fcfaf6, #e7efe9); }
.frontend-app .app-stat-card.tone-green { background: linear-gradient(160deg, #fcfaf6, #e3eee6); }
.frontend-app .app-stat-card.tone-sand { background: linear-gradient(160deg, #fdfaf4, #f2e7d7); }
.frontend-app .app-stat-card.tone-ink { background: linear-gradient(160deg, #fcfaf6, #e9e6de); }

.frontend-app .app-stat-top,
.frontend-app .app-section-head,
.frontend-app .app-search-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.frontend-app .app-search-head-compact,
.frontend-app .app-section-head-compact {
  align-items: center;
  margin-bottom: 8px;
}

.frontend-app .app-stat-top i {
  font-size: 22px;
  color: rgba(59,47,35,.78);
}

.frontend-app .app-stat-value {
  margin-top: 12px;
  font-family: 'Baloo 2', 'Manrope', system-ui, sans-serif;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.frontend-app .app-stat-text {
  margin-top: 12px;
  font-family: 'Baloo 2', 'Manrope', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.04;
}

.frontend-app .app-stat-text-small {
  font-size: 18px;
  line-height: 1.15;
}

.frontend-app .app-stat-card-location {
  display: grid;
  gap: 10px;
}

.frontend-app .app-stat-select-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #6b5b4d;
}

.frontend-app .app-info-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}

.frontend-app .app-info-card-compact {
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(110,92,68,0.16);
  background: linear-gradient(135deg, #fcfaf6, #f1ece2);
  box-shadow: 0 8px 18px rgba(72,52,32,0.06);
}

.frontend-app .app-info-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-size: 24px;
  background: linear-gradient(135deg, var(--app-accent-3), var(--app-accent-2));
  color: #fff;
}

.frontend-app .app-info-card-compact .app-info-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  font-size: 18px;
}

.frontend-app .app-section-title {
  margin: 0;
  font-family: 'Baloo 2', 'Manrope', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.frontend-app .app-section-title,
.frontend-app .app-section-copy,
.frontend-app .app-stat-note {
  margin-top: 0;
  margin-bottom: 0;
}

.frontend-app .app-info-card-compact .app-section-title {
  font-size: 18px;
}

.frontend-app .app-info-card-compact .app-section-copy {
  font-size: 14px;
  line-height: 1.4;
}

.frontend-app .app-chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.frontend-app .app-chip-row-compact {
  gap: 8px;
  margin-bottom: 10px;
}

.frontend-app .app-chip-row-dense {
  gap: 6px;
  margin-bottom: 8px;
}

.frontend-app .app-chip,
.frontend-app .app-inline-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,250,242,0.98);
  border: 1px solid rgba(110,92,68,0.18);
  font-weight: 700;
  color: #3b2f23;
}

.frontend-app .app-chip-row-compact .app-chip {
  padding: 8px 11px;
  font-size: 13px;
}

.frontend-app .app-chip-row-dense .app-chip {
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.frontend-app .app-chip-select {
  cursor: pointer;
  min-width: 0;
}

.frontend-app .app-chip-control {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  padding: 0 18px 0 0;
  outline: none;
  appearance: none;
  max-width: 180px;
}

.frontend-app .app-chip-select-home {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: space-between;
}

.frontend-app .app-chip-select-home .app-chip-control {
  width: 100%;
  max-width: none;
}

.frontend-app .app-chip-status {
  margin-left: auto;
}

.frontend-app .app-chip-strong { background: #f4e6d3; }
.frontend-app .app-chip-muted {
  color: #6a6259;
}
.frontend-app .app-chip.is-online { color: #356859; }
.frontend-app .app-chip.is-offline { color: #756d65; }
.frontend-app .app-inline-tag { padding: 4px 10px; font-size: 12px; }
.frontend-app .app-inline-tag.warm { color: #9d5b22; }

.frontend-app .app-segmented {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 18px;
  background: #eee7dc;
  border: 1px solid rgba(110,92,68,0.18);
}

.frontend-app .app-segmented-compact {
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
}

.frontend-app .app-segmented button {
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  background: transparent;
  color: #6d655d;
}

.frontend-app .app-segmented-compact button {
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}

.frontend-app .app-segmented button.is-active {
  background: linear-gradient(135deg, #fffdfa, #f3e6d7);
  color: #2f2419;
  box-shadow: inset 0 0 0 1px rgba(157,91,34,0.16), 0 2px 8px rgba(72,52,32,0.08);
}

.frontend-app .app-search-wrap {
  position: relative;
  margin-top: 16px;
}

.frontend-app .app-search-wrap-inline {
  flex: 1 1 auto;
  margin-top: 0;
}

.frontend-app .app-search-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.frontend-app .app-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--app-muted);
}

.frontend-app .app-search-input,
.frontend-app .app-input,
.frontend-app .app-select-control,
.frontend-app .form-control,
.frontend-app .form-select {
  min-height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(110,92,68,0.2);
  background: rgba(255,255,255,0.96);
  box-shadow: none;
}

.frontend-app .app-select-wrap-compact {
  width: 100%;
}

.frontend-app .app-select-wrap-compact .app-select-control {
  width: 100%;
  min-height: 48px;
  font-weight: 700;
  color: #2f2419;
}

.frontend-app .app-search-input {
  padding-left: 46px;
}

.frontend-app .app-search-wrap-inline .app-search-input {
  min-height: 42px;
  padding-left: 38px;
  border-radius: 14px;
}

.frontend-app .app-search-wrap-inline .app-search-icon {
  left: 12px;
  font-size: 14px;
}

.frontend-app .app-search-results,
.frontend-app .app-list-stack,
.frontend-app .app-user-stack,
.frontend-app .app-history-stack {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.frontend-app .app-surface-search {
  padding: 10px 12px;
}

.frontend-app .app-surface-search .app-search-results {
  margin-top: 8px;
}

.frontend-app .app-list-stack {
  gap: 10px;
  margin-top: 8px;
}

.frontend-app .app-list-entry {
  display: grid;
  gap: 6px;
}

.frontend-app .app-search-result,
.frontend-app .app-list-row,
.frontend-app .app-user-row,
.frontend-app .app-history-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(110,92,68,0.14);
  background: rgba(255,255,255,0.88);
  border-radius: 20px;
}

.frontend-app .app-stat-note-strong {
  font-weight: 700;
  color: #4b4034;
}

.frontend-app .app-search-result {
  border: 0;
  text-align: left;
}

.frontend-app .app-search-result-title,
.frontend-app .app-list-title,
.frontend-app .app-setting-title {
  font-weight: 800;
  color: var(--app-text);
}

.frontend-app .app-search-result-meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--app-muted);
}

.frontend-app .app-list-row-main {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.frontend-app .app-list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.frontend-app .app-avatar-badge {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(217,119,6,0.95), rgba(124,58,237,0.82));
  color: white;
  font-weight: 800;
}

.frontend-app .app-list-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}

.frontend-app .app-list-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.frontend-app .app-icon-button {
  min-width: 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(185,28,28,0.12);
  color: #b91c1c;
  box-shadow: none;
}

.frontend-app .app-icon-button-neutral {
  border-color: rgba(110,92,68,0.16);
  color: #5a4a39;
}

.frontend-app .app-migrate-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(110,92,68,0.12);
  background: rgba(255,250,243,0.96);
  border-radius: 18px;
}

.frontend-app .app-migrate-panel-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--app-text);
}

.frontend-app .app-migrate-panel-copy strong {
  font-size: 13px;
}

.frontend-app .app-migrate-panel-copy span {
  font-size: 12px;
  color: var(--app-muted);
}

.frontend-app .app-migrate-panel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.frontend-app .app-migrate-target {
  min-width: 220px;
  min-height: 42px !important;
  border-radius: 14px !important;
  font-size: 14px;
}

.frontend-app .app-migrate-confirm-btn {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(110,92,68,0.16);
  background: #8b5e34;
  color: #fff;
  font-weight: 800;
}

.frontend-app .app-empty-state,
.frontend-app .app-search-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  border-radius: 20px;
  border: 1px dashed rgba(92,72,43,0.18);
  background: rgba(255,255,255,0.46);
  color: var(--app-muted);
}

.frontend-app .app-empty-state i {
  font-size: 22px;
}

.frontend-app .app-mini-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.frontend-app .app-mini-stat {
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(92,72,43,0.08);
}

.frontend-app .app-mini-stat.accent {
  background: rgba(217,119,6,0.12);
}

.frontend-app .app-mini-stat-compact {
  min-width: 76px;
  padding: 6px 8px;
  text-align: center;
}

.frontend-app .app-mini-stat-compact strong {
  display: block;
  font-size: 20px;
  line-height: 1;
}

.frontend-app .app-setting-stack {
  display: grid;
  gap: 14px;
}

.frontend-app .app-setting-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(92,72,43,0.08);
}

.frontend-app .app-auth-modal-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.frontend-app .app-auth-modal-card {
  width: min(460px, 92vw);
  padding: 20px;
  display: grid;
  gap: 12px;
}

.frontend-app .app-auth-modal-form {
  display: grid;
  gap: 10px;
}

.frontend-app .app-auth-modal-button {
  min-height: 44px;
  border: 1px solid rgba(110,92,68,0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, #fffdfa, #f3e6d7);
  color: #2f2419;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(72,52,32,0.08);
}

.frontend-app .app-auth-modal-button:hover {
  background: linear-gradient(135deg, #fffaf4, #eedcc8);
}

.frontend-app .app-auth-modal-button:disabled {
  opacity: .6;
}

.frontend-app .app-auth-modal-message {
  min-height: 20px;
  font-size: 14px;
  color: #6a6259;
}

.frontend-app .app-auth-modal-footer {
  display: flex;
  justify-content: flex-start;
}

.frontend-app .app-auth-modal-link {
  color: #7a4b21;
  font-weight: 700;
  text-decoration: none;
}

.frontend-app .app-auth-modal-link:hover {
  color: #5f3918;
  text-decoration: underline;
}

.frontend-app .app-switch {
  width: 52px;
  height: 28px;
  margin: 0;
  cursor: pointer;
  background-color: rgba(110,92,68,0.18);
  border: 1px solid rgba(110,92,68,0.18);
  border-radius: 999px;
  box-shadow: none;
  background-image: none;
}

.frontend-app .app-switch:focus {
  border-color: rgba(139,94,52,0.45);
  box-shadow: 0 0 0 4px rgba(139,94,52,0.16);
}

.frontend-app .app-switch:checked {
  background-color: #8b5e34;
  border-color: #8b5e34;
}

.frontend-app .app-switch::before {
  background-color: #fff;
}

.frontend-app .app-setting-row {
  gap: 16px;
}

.frontend-app .app-setting-row .app-switch {
  flex: 0 0 auto;
}

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

.frontend-app .app-action-card {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 12px;
  min-height: 64px;
  border-radius: 20px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(92,72,43,0.08);
  color: var(--app-text);
  box-shadow: none;
  font-weight: 800;
}

.frontend-app .app-action-card.danger {
  color: #b91c1c;
  border-color: rgba(185,28,28,0.12);
}

.frontend-app .app-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.frontend-app .app-form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.frontend-app .app-primary-btn,
.frontend-app .btn-primary,
.frontend-app .btn-outline-secondary,
.frontend-app .btn-outline-danger,
.frontend-app .btn-light {
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 18px;
  border: 1px solid transparent;
  font-weight: 800;
  box-shadow: none;
}

.frontend-app .btn-primary,
.frontend-app .app-primary-btn {
  background: linear-gradient(135deg, var(--app-accent), #f59e0b);
  border-color: transparent;
}

.frontend-app .btn-outline-secondary,
.frontend-app .btn-light {
  background: rgba(255,255,255,0.72);
  border-color: rgba(92,72,43,0.12);
  color: var(--app-text);
}

.frontend-app .btn-outline-danger {
  background: rgba(255,255,255,0.72);
  border-color: rgba(185,28,28,0.16);
  color: #b91c1c;
}

.frontend-app .bottom-nav {
  left: 14px;
  right: 14px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  width: auto;
  height: auto;
  padding: 10px;
  border-radius: 28px;
  background: rgba(255,253,248,0.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(92,72,43,0.12);
  box-shadow: 0 18px 40px rgba(68,52,29,.18);
}

.frontend-app .bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 68px;
  min-height: 62px;
  padding: 8px 12px;
  border-radius: 20px;
  color: var(--app-muted);
}

.frontend-app .bottom-nav button.active {
  color: var(--app-text);
  background: linear-gradient(135deg, rgba(217,119,6,0.16), rgba(255,255,255,0.9));
}

.frontend-app .bottom-nav-icon { font-size: 20px; }
.frontend-app .bottom-nav-label { font-size: 12px; font-weight: 700; }

.frontend-app .splash-screen,
.frontend-app #splash,
.frontend-app #pinScreen {
  min-height: calc(100vh - env(safe-area-inset-top, 0px));
  padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
  background:
    radial-gradient(circle at top, rgba(245, 158, 11, 0.32), transparent 30%),
    linear-gradient(180deg, #1f2937 0%, #111827 100%);
}

.frontend-app .splash-mark {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2));
  box-shadow: 0 18px 40px rgba(217,119,6,.28);
  margin-bottom: 16px;
}

.frontend-app .splash-kicker,
.frontend-app .pin-kicker {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  font-weight: 800;
  opacity: .78;
}

.frontend-app .pin-shell {
  width: min(100%, 360px);
  padding: 28px 24px;
  text-align: center;
  border-radius: 30px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
}

.frontend-app .pin-dots {
  letter-spacing: .35rem;
  margin-bottom: 20px;
}

.frontend-app .pin-grid {
  grid-template-columns: repeat(3, 78px);
  gap: 14px;
}

.frontend-app .pin-key {
  width: 78px;
  height: 78px;
  border-radius: 24px;
  border: 0;
  background: rgba(255,255,255,0.16);
  color: #fff;
}

.frontend-app .pin-device-id{
  bottom:18px;
  color:rgba(255,255,255,0.54);
}

.frontend-app .pin-key.btn-success {
  background: linear-gradient(135deg, var(--app-accent), #f59e0b);
}

.frontend-app .loading-overlay {
  background: rgba(17,24,39,.28);
  backdrop-filter: blur(10px);
}

.frontend-app #status {
  top: env(safe-area-inset-top, 0px) !important;
  background: rgba(255,253,248,0.9) !important;
  color: var(--app-text) !important;
  border: 1px solid rgba(92,72,43,0.12);
  border-radius: 18px !important;
}

.frontend-app .scan-debug-toggle{
  border-color: rgba(255,255,255,0.12);
  background: rgba(31,41,55,0.74);
}

.frontend-app .scan-debug-panel{
  background: rgba(31,41,55,0.92);
}

.frontend-app #scanner.scanner-calm::after{
  border-color: rgba(255,250,242,0.9);
  box-shadow:
    0 0 0 9999px rgba(17,24,39,0.14) inset,
    0 10px 30px rgba(0,0,0,0.16);
}

.frontend-app #scanner.scanner-calm::before{
  background: rgba(31,41,55,0.76);
}

.frontend-app #undoBar {
  background: rgba(31,41,55,0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
}

@media (max-width: 820px) {
  .frontend-app .app-hero-panel,
  .frontend-app .app-settings-grid,
  .frontend-app .app-form-grid {
    grid-template-columns: 1fr;
  }

  .frontend-app .app-topbar,
  .frontend-app .app-search-head {
    flex-direction: column;
    align-items: stretch;
  }

  .frontend-app .app-search-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .frontend-app .app-migrate-panel {
    display: grid;
    grid-template-columns: 1fr;
  }

  .frontend-app .app-migrate-panel-controls {
    flex-wrap: wrap;
  }

  .frontend-app .app-migrate-target {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .frontend-app #app.container {
    padding: 18px 14px calc(var(--nav) + 30px);
  }

  .frontend-app .app-stat-grid,
  .frontend-app .app-action-grid {
    grid-template-columns: 1fr;
  }

  .frontend-app .bottom-nav {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 8px;
  }

  .frontend-app .bottom-nav button {
    min-width: 0;
    flex: 1 1 0;
  }
}

.frontend-app .app-hero-panel::before {
  content: '';
  position: absolute;
  right: 14px;
  top: 14px;
  width: 120px;
  height: 120px;
  border-radius: 30px;
  background: radial-gradient(circle, rgba(255,255,255,0.42) 0 18%, transparent 20% 100%);
  background-size: 18px 18px;
  opacity: .55;
}
.frontend-app .app-device-pill {
  border-radius: 22px;
}
.frontend-app .app-info-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.84), rgba(239,246,255,0.72));
}
.frontend-app .app-search-result:hover,
.frontend-app .app-list-row:hover,
.frontend-app .app-user-row:hover,
.frontend-app .app-history-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(183,119,49,0.10);
}
.frontend-app .app-search-result,
.frontend-app .app-list-row,
.frontend-app .app-user-row,
.frontend-app .app-history-row {
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}



.device-admin-modal{
  padding: 0;
  overflow: hidden;
}

.device-admin-modal__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:18px 18px 14px;
  background: linear-gradient(180deg, #fbfcff 0%, #f6f8fc 100%);
  border-bottom:1px solid var(--line);
}

.device-admin-modal__headcopy{
  min-width:0;
}

.device-admin-modal__headcopy .h1{
  font-size: 26px;
  font-weight: 700;
  line-height: 1.08;
}

.device-admin-modal__subtitle{
  margin-top:6px;
  max-width: 44ch;
  font-size:13px;
  line-height:1.55;
  color:#66758a;
}

.device-admin-modal__body{
  padding:18px;
  background:var(--panel);
}

.device-admin-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  padding:14px 18px 18px;
  border-top:1px solid var(--line);
  background:#fcfdff;
}

.device-admin-modal__ghost,
.device-admin-modal__secondary,
.device-admin-modal__primary{
  min-height:42px;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}

.device-admin-modal__ghost,
.device-admin-modal__secondary{
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  box-shadow:none;
}

.device-admin-modal__ghost{
  min-width:42px;
  padding:0;
  font-size:22px;
  line-height:1;
}

.device-admin-modal__primary{
  border:1px solid #d8e3f2;
  background:linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);
  color:#24364a;
  box-shadow:0 6px 16px rgba(148, 163, 184, 0.16);
}

.device-admin-modal__primary:hover{
  background:linear-gradient(180deg, #f0f5fa 0%, #e7edf5 100%);
}

.device-admin-modal__secondary:hover,
.device-admin-modal__ghost:hover{
  background:#f8fafc;
}

.device-admin-pin-card{
  padding:20px;
  border:1px solid #dbe7ff;
  border-radius:18px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.device-admin-pin-card__eyebrow{
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#64748b;
}

.device-admin-pin-card__value{
  margin-top:10px;
  font-size:38px;
  font-weight:900;
  letter-spacing:.18em;
  line-height:1;
  color:#0f172a;
}

.device-admin-pin-card__hint{
  margin-top:12px;
  font-size:13px;
  line-height:1.5;
  color:#475569;
}

.device-admin-table-btn{
  min-width:72px;
  min-height:34px;
  padding:7px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  line-height:1;
}

.device-admin-table-btn--neutral{
  background:#fff;
  color:var(--text);
}

.device-admin-table-btn--warn{
  background:#fff7ed;
  border-color:#fed7aa !important;
  color:#c2410c !important;
}

.device-admin-table-btn--danger{
  background:#fef2f2;
  border-color:#fecaca !important;
  color:#b91c1c !important;
}

.device-admin-table-btn--success{
  background:#ecfdf5;
  border-color:#bbf7d0 !important;
  color:#15803d !important;
}