:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #18221d;
  background: #eef2ee;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 10%, rgba(67, 133, 91, .14), transparent 34rem),
    #eef2ee;
}

.shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.card {
  width: min(100%, 29rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(24, 34, 29, .1);
  border-radius: 1.25rem;
  box-shadow: 0 1.5rem 4rem rgba(28, 50, 37, .12);
}

.eyebrow {
  margin: 0 0 .75rem;
  color: #39764e;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
}

h1 {
  margin: 0;
  font-size: clamp(1.75rem, 7vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.lead { margin: .85rem 0 1.65rem; color: #5a675f; line-height: 1.55; }
.hint { margin: -.75rem 0 1.25rem; color: #66736b; font-size: .9rem; }

form { display: grid; gap: .7rem; }
label { margin-top: .45rem; font-size: .9rem; font-weight: 700; }

input, select {
  width: 100%;
  min-height: 3rem;
  padding: .75rem .9rem;
  border: 1px solid #bdc8c0;
  border-radius: .65rem;
  background: #fff;
  color: inherit;
  font: inherit;
  outline: none;
}

input:focus, select:focus { border-color: #39764e; box-shadow: 0 0 0 .2rem rgba(57, 118, 78, .14); }
.code { font-size: 1.4rem; letter-spacing: .35em; text-align: center; }

button {
  min-height: 3rem;
  margin-top: .75rem;
  border: 0;
  border-radius: .65rem;
  background: #326d47;
  color: white;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

button:hover { background: #285a3a; }
button:focus-visible, a:focus-visible { outline: .2rem solid rgba(57, 118, 78, .28); outline-offset: .2rem; }
button.secondary { background: #e7ece8; color: #25342b; }

.alert {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid #e4bbb6;
  border-radius: .65rem;
  background: #fff0ee;
  color: #8b2e24;
  line-height: 1.4;
}

.back { display: inline-block; margin-top: 1.35rem; color: #326d47; font-weight: 700; }

.identity { margin: 1.5rem 0; border-top: 1px solid #e0e5e1; }
.identity div { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid #e0e5e1; }
.identity dt { color: #69756e; }
.identity dd { margin: 0; font-weight: 750; text-align: right; }

.wide-shell { width: min(100%, 76rem); margin: 0 auto; padding: 2rem 1rem 4rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.top-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.top-actions form { display: block; }
.compact { min-height: 2.5rem; margin: 0; padding: .55rem .85rem; }
.button-link { display: inline-flex; min-height: 2.5rem; align-items: center; justify-content: center; padding: .55rem .9rem; border-radius: .65rem; background: #326d47; color: #fff; font-weight: 750; text-decoration: none; }
.button-link.full { width: 100%; min-height: 3rem; margin-bottom: .75rem; }
.secondary-link { background: #e7ece8; color: #25342b; }
.notice { margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid #a9cfb5; border-radius: .65rem; background: #eaf7ee; color: #245b36; }
.table-card, .panel { padding: 1.2rem; border: 1px solid rgba(24,34,29,.1); border-radius: 1rem; background: rgba(255,255,255,.97); box-shadow: 0 1rem 3rem rgba(28,50,37,.08); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .9rem .75rem; border-bottom: 1px solid #e0e5e1; text-align: left; vertical-align: top; }
th { color: #5a675f; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
td small { display: block; margin-top: .25rem; color: #69756e; white-space: nowrap; }
td a, .danger-link { color: #326d47; font-weight: 750; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; align-items: start; }
.panel h2 { margin-top: 0; }
.panel form + form { margin-top: 1rem; }
.danger-zone { border-color: #e4bbb6; }
button.danger { background: #a53a2f; }
button.danger:hover { background: #862d25; }
button.danger-outline { background: #fff0ee; color: #8b2e24; border: 1px solid #e4bbb6; }
.danger-link { color: #9a3329; }
.check { display: flex; align-items: center; gap: .65rem; }
.check input { width: 1.2rem; min-height: 1.2rem; }
.enrollment { text-align: center; }
.enrollment label { display: block; text-align: left; }
.qr { display: block; width: min(100%,16rem); height: auto; margin: 1rem auto; border: .75rem solid #fff; }
.secret { display: block; overflow-wrap: anywhere; padding: .9rem; border-radius: .65rem; background: #eef2ee; font-size: 1rem; letter-spacing: .08em; user-select: all; }
.pagination { margin-top: 1rem; display: flex; justify-content: flex-end; }
.warning { border-color: #e5cb8d; background: #fff8e8; color: #6c5010; }
.visibility-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.visibility-panel h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.visibility-panel .hint { margin: 0; }
.visibility-panel form { flex: 0 0 auto; }
.visibility-warning { margin: .7rem 0 0; padding: .65rem .8rem; border: 1px solid #e5cb8d; border-radius: .65rem; }
.visibility-badge { color: #8b2e24; font-weight: 700; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; color: #5a675f; }
.breadcrumbs a { color: #326d47; font-weight: 700; }
.file-table td:first-child { width: 60%; overflow-wrap: anywhere; }
.file-table td:first-child a { display: inline-flex; gap: .45rem; align-items: baseline; }
.search-bar { display: grid; grid-template-columns: minmax(12rem,1fr) auto; gap: .75rem; margin: 0 0 1rem; }
.search-bar input, .search-bar button { min-height: 3rem; margin: 0; }
.search-bar button { padding: .65rem 1.25rem; }
.result-path { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; color: #69756e; font-size: .82rem; }
.result-path a { color: #5a675f; font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.audit-filter-panel { margin-bottom: 1rem; }
.audit-filter-panel h2 { margin: 0 0 .75rem; }
.audit-filter-panel .hint { margin: 0 0 1rem; }
.audit-filters { grid-template-columns: repeat(4,minmax(10rem,1fr)); align-items: end; }
.audit-filters label { display: grid; gap: .45rem; margin: 0; }
.audit-operation-filter { grid-column: span 2; }
.audit-filter-actions { display: flex; align-items: center; gap: .7rem; min-height: 3rem; }
.audit-filter-actions button { margin: 0; padding: .55rem 1rem; }
.audit-table-card { padding: .5rem; }
.audit-table { min-width: 78rem; }
.audit-table td { max-width: 24rem; overflow-wrap: anywhere; }
.audit-table td small { white-space: normal; }
.audit-table code { font-size: .78rem; overflow-wrap: anywhere; }
.audit-path { display: block; font-weight: 700; }
.audit-result { display: inline-block; margin-top: .45rem; padding: .2rem .5rem; border-radius: 999px; background: #e7ece8; font-size: .78rem; font-weight: 750; }
.audit-result-success { background: #eaf7ee; color: #245b36; }
.audit-result-denied, .audit-result-failed { background: #fff0ee; color: #8b2e24; }
.audit-error { color: #8b2e24; font-weight: 700; }

@media (max-width: 720px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .settings-grid { grid-template-columns: 1fr; }
  th, td { min-width: 9rem; }
  .search-bar { grid-template-columns: 1fr; }
  .audit-filters { grid-template-columns: 1fr; }
  .audit-operation-filter { grid-column: auto; }
  .visibility-panel { align-items: stretch; flex-direction: column; }
}