:root {
  color-scheme: light;
  --bg:#fafbf8;
  --surface:#fff;
  --text:#26332d;
  --muted:#56665b;
  --line:#dce3dc;
  --accent:#276349;
 
}

* {
  box-sizing:border-box;
 
}
 [hidden] {
  display:none!important;
 
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 
}

h1 {
  font-size:28px;
  line-height:1.3;
  letter-spacing:-.025em;
  font-weight:600;
  margin:0 0 10px;
 
}
 h2 {
  font-size:16px;
  margin:28px 0 10px;
 
}
 p {
  margin:8px 0;
  max-width:75ch;
 
}
 button,input,select {
  font:inherit;
 
}
 button {
  cursor:pointer;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:5px;
  padding:8px 13px;
  color:var(--text);
 
}
 button:hover {
  background:#e8efe6;
 
}
 button:disabled {
  opacity:.6;
  cursor:wait;
 
}
 button.primary {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
 
}
 button.primary:hover {
  background:#1c5039;
 
}
 :focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px;
 
}

input,select {
  border:1px solid #a4b3a5;
  background:white;
  color:var(--text);
  padding:8px 10px;
  border-radius:5px;
  max-width:100%;
 
}
 input[type=checkbox] {
  width:20px;
  height:20px;
  accent-color:var(--accent);
 
}
 label {
  display:block;
  font-weight:500;
 
}
 form>input {
  display:block;
  width:100%;
  margin:7px 0 22px;
 
}
 .skip {
  position:absolute;
  top:-100px;
  background:white;
  padding:12px;
  z-index:2;
  color:var(--accent);
 
}
.skip:focus {
  top:10px;
 
}

.brand {
  font-size:28px;
  letter-spacing:-.035em;
  font-weight:650;
 
}
.brand span {
  font-size:12px;
  color:var(--muted);
  font-weight:400;
  letter-spacing:0;
  margin-left:8px;
 
}
.login-panel {
  max-width:420px;
  margin:12vh auto;
  padding:30px;
 
}
.login-panel h1 {
  margin-top:40px;
 
}
.login-panel p {
  color:var(--muted);
  margin-bottom:24px;
 
}
.shell {
  display:grid;
  grid-template-columns:218px minmax(0,1fr);
  min-height:100vh;
 
}
aside {
  display:flex;
  flex-direction:column;
  background:#f4f6f0;
  border-right:1px solid var(--line);
  padding:30px 20px;
 
}
nav {
  display:grid;
  gap:6px;
  margin-top:35px;
 
}
nav button {
  border:0;
  background:transparent;
  text-align:left;
  color:var(--muted);
 
}
nav button[aria-current] {
  color:#24583d;
  background:#e3ebdf;
  font-weight:600;
 
}
.sidebar-bottom {
  margin-top:auto;
  padding-top:30px;
 
}
.sidebar-bottom p {
  color:var(--muted);
  font-size:12px;
 
}
main {
  padding:42px 44px 20px;
  min-width:0;
  max-width:1500px;
  width:100%;
  margin:auto;
 
}
header {
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
 
}
header p {
  color:var(--muted);
  font-size:13px;
 
}
.summary-band {
  display:flex;
  gap:24px;
  align-items:center;
  border-block:1px solid var(--line);
  margin:32px 0 22px;
  padding:16px 0;
 
}
.summary-band strong {
  font-size:22px;
  margin-right:8px;
  font-weight:500;
 
}
#update-state {
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
 
}
.search {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  font-size:12px;
  margin-bottom:16px;
 
}
.table-scroll-hint {
  display:none;
  color:var(--muted);
  font-size:12px;
  margin:0 0 10px;
}
.table-frame {
  overflow:auto;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface);
 
}
table {
  border-collapse:collapse;
  width:100%;
  text-align:left;
  font-size:12px;
 
}
th {
  background:#f5f7f2;
  color:var(--muted);
  font-weight:500;
  padding:12px 18px;
  white-space:nowrap;
 
}
td {
  padding:20px 18px;
  border-top:1px solid var(--line);
 
}
td:first-child {
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
 
}
td span {
  display:block;
  color:var(--muted);
  margin-top:4px;
 
}
#empty {
  text-align:center;
  padding:30px 20px;
 
}
#empty p {
  margin:auto;
  color:var(--muted);
 
}
.privacy-note {
  color:var(--muted);
  font-size:12px;
  margin-top:18px;
 
}
.policy {
  max-width:450px;
 
}
dl {
  display:grid;
  grid-template-columns:1fr 1fr;
  font-size:12px;
 
}
dt,dd {
  margin:0;
  padding:9px 0;
  border-top:1px solid var(--line);
 
}
dt {
  color:var(--muted);
 
}
dd {
  text-align:right;
 
}
#config-form {
  margin-top:24px;
  border:1px solid var(--line);
  border-radius:7px;
  background:white;
  max-width:830px;
 
}
.form-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:20px 24px;
  border-bottom:1px solid var(--line);
 
}
.form-row input:not([type=checkbox]),.form-row select {
  width:220px;
 
}
.form-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:20px 0;
 
}
#config-form .form-actions {
  padding:20px 24px;
 
}
#password-form {
  max-width:420px;
  margin-top:28px;
 
}
.list-frame {
  overflow:auto;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface);
  max-width:1100px;
}
.list-frame td {
  padding:14px 18px;
  vertical-align:middle;
}
.list-empty {
  text-align:center;
  color:var(--muted);
  padding:24px 20px;
  margin:auto;
}
.fingerprint {
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;
  min-width:220px;
}
.state-on {
  color:var(--accent);
  font-weight:500;
  white-space:nowrap;
}
.state-off {
  color:var(--muted);
  white-space:nowrap;
}
.row-actions {
  white-space:nowrap;
}
.row-actions button+button {
  margin-left:8px;
}
button.danger {
  color:#9b2c2c;
  border-color:#e2c4c4;
}
button.danger:hover {
  background:#f8e9e9;
}
.panel-form {
  max-width:830px;
  border:1px solid var(--line);
  border-radius:7px;
  background:white;
  padding:20px 24px 0;
}
.panel-form .form-row {
  padding:16px 0;
}
.panel-form>input,.panel-form>textarea {
  display:block;
  width:100%;
  margin:7px 0 16px;
}
textarea {
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  border:1px solid #a4b3a5;
  background:white;
  color:var(--text);
  padding:8px 10px;
  border-radius:5px;
  resize:vertical;
  max-width:100%;
}
.hint {
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:400;
}
dialog {
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  color:var(--text);
  padding:24px;
  width:min(460px,calc(100% - 32px));
  box-shadow:0 12px 32px #26332d33;
}
dialog::backdrop {
  background:#26332d55;
}
dialog h2 {
  margin-top:0;
}
#confirm-text {
  overflow-wrap:anywhere;
}
#confirm-form>input {
  display:block;
  width:100%;
  margin:7px 0 4px;
}
footer {
  color:var(--muted);
  font-size:12px;
  margin-top:52px;
  padding-top:20px;
 
}
#message {
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:var(--text);
  color:white;
  padding:10px 20px;
  border-radius:6px;
  max-width:calc(100% - 32px);
  box-shadow:0 6px 20px #26332d22;
 
}
#message:empty {
  display:none;
 
}

@media(max-width:900px) {
  .shell {
  grid-template-columns:180px minmax(0,1fr);
 
}
main {
  padding:30px 24px;
 
}
.summary-band {
  flex-wrap:wrap;
 
}
#update-state {
  margin-left:0;
 
}

}

@media(max-width:640px) {
  .table-scroll-hint {
    display:block;
  }
  .shell {
  display:block;
 
}
aside {
  padding:16px 20px;
  border-right:0;
  border-bottom:1px solid var(--line);
 
}
.brand {
  font-size:22px;
 
}
nav {
  display:flex;
  flex-wrap:wrap;
  margin-top:12px;
  gap:4px;
 
}
nav button {
  padding:7px 10px;
  font-size:12px;
 
}
.sidebar-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:10px;
 
}
main {
  padding:26px 20px;
 
}
h1 {
  font-size:24px;
 
}
header {
  align-items:flex-start;
  flex-wrap:wrap;
 
}
.summary-band {
  gap:12px;
  margin-top:24px;
 
}
.search {
  flex-wrap:wrap;
  justify-content:flex-start;
 
}
.search input {
  width:100%;
 
}
.form-row {
  align-items:flex-start;
  flex-direction:column;
  gap:10px;
  padding:18px;
 
}
.form-row input:not([type=checkbox]),.form-row select {
  width:100%;
 
}
#config-form .form-actions {
  padding:18px;
 
}
.login-panel {
  margin:8vh auto;
  padding:24px;
 
}
th,td {
  padding:12px;
 
}

}

@media(prefers-reduced-motion:no-preference) {
  button {
  transition:background-color 120ms ease-out;
 
}

}

.code-row input {
  display:block;
  width:100%;
  margin:7px 0 8px;
  letter-spacing:.2em;
}
.secret-list {
  max-width:830px;
  grid-template-columns:140px 1fr;
}
.secret-list dd {
  text-align:left;
}
code.secret {
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;
  user-select:all;
}