.util-panel {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - var(--space-6)));
  max-height: min(62vh, 540px);
  overflow: hidden;
  background: var(--surface-raised);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  font-family: var(--font-ui);
}

.util-panel[hidden],
.util-overlay[hidden] {
  display: none;
}

body.zen .util-panel { display: none; }

.util-panel:not([data-side]) {
  top: calc(var(--panel-top, var(--topbar-height)) + var(--space-4));
  right: var(--space-4);
}

.util-panel[data-util-panel='search'][data-side] {
  top: var(--surface-y, calc(var(--panel-top, var(--topbar-height)) + var(--space-4)));
  left: var(--surface-x, auto);
  right: auto;
  max-height: min(var(--surface-max-h, 62vh), 540px);
}

.util-panel[data-util-panel='search'][data-placing] { visibility: hidden; }

.util-panel[data-util-panel='search'] .util-head {
  border-top: var(--hairline) solid var(--line-hairline);
  border-bottom: 0;
}

.util-panel[data-util-panel='search'] .util-foot {
  border-top: 0;
  border-bottom: var(--hairline) solid var(--line-hairline);
}

.modal-back.util-overlay {
  align-items: start;
  padding-top: 12vh;
}

.util-command {
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - var(--space-6)));
  max-height: 64vh;
  padding: 0;
  overflow: hidden;
}

.util-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-bottom: var(--hairline) solid var(--line-hairline);
}

.util-title {
  flex: 1 1 auto;
  color: var(--text-primary);
  font-size: var(--type-sm);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.util-field {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--control-height);
  padding: 0 var(--space-3);
  background: var(--surface-inset);
  color: var(--text-primary);
  border: var(--hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--type-md);
}
.util-field::placeholder { color: var(--text-muted); }
.util-field:focus {
  outline: none;
  border-color: var(--accent-quiet);
}

.util-field-lg {
  height: auto;
  padding: var(--space-5);
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) solid var(--line-hairline);
  border-radius: 0;
  font-size: var(--type-lg);
}
.util-field-lg:focus {
  outline: none;
  border-bottom-color: var(--accent-quiet);
}

.util-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-2);
}

.util-group {
  padding: var(--space-3) var(--space-3) var(--space-1);
  color: var(--text-primary);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.util-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}
.util-row:hover { background: var(--surface-sunken); }
.util-row.sel {
  background: var(--surface-sunken);
  box-shadow: inset 2px 0 0 var(--accent);
}

.util-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.util-label {
  overflow: hidden;
  font-size: var(--type-md);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.util-sub {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--type-sm);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.util-stamp { font-family: var(--font-mono); }

.util-tag {
  flex: 0 0 auto;
  padding: 1px var(--space-2);
  color: var(--text-muted);
  border: var(--hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
}

.util-empty {
  padding: var(--space-6) var(--space-4);
  color: var(--text-muted);
  font-size: var(--type-sm);
  text-align: center;
}

.util-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-top: var(--hairline) solid var(--line-hairline);
  color: var(--text-muted);
  font-size: 10px;
}

.util-chips {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--hairline) solid var(--line-hairline);
}

.util-chip {
  padding: 1px var(--space-2);
  background: transparent;
  color: var(--text-muted);
  border: var(--hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}
.util-chip.on {
  color: var(--text-primary);
  border-color: var(--accent-quiet);
}

.exp-import {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: var(--hairline) solid var(--line-hairline);
}

.exp-area {
  height: auto;
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-normal);
  resize: vertical;
}

.exp-row {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.exp-row-btn {
  width: 100%;
  background: transparent;
  border: 0;
  font-family: var(--font-ui);
  text-align: left;
}

.snap-take {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: var(--hairline) solid var(--line-hairline);
}

.snap-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.snap-row:hover { background: var(--surface-sunken); }