.baoku-cookie-name-field {
  display: grid;
  gap: 8px;
  margin-bottom: 15px;
}

.baoku-cookie-name-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(218, 190, 126, .16);
  border-radius: 7px;
  color: #eee9dd;
  background: #080c0b;
  font: inherit;
  outline: none;
}

.baoku-cookie-name-field input:focus,
.baoku-cookie-label-editor input:focus {
  border-color: rgba(218, 190, 126, .48);
  box-shadow: 0 0 0 3px rgba(218, 190, 126, .08);
}

.baoku-cookie-name-field small {
  color: #81857d;
  font-size: 11px;
  line-height: 1.6;
}

.source-cookie-page .source-cookie-pool {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  container-type: inline-size;
}

.source-cookie-page .source-cookie-pool .source-cookie-list {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.source-cookie-page .source-cookie-pool .source-cookie-row {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr) auto;
  gap: 18px;
  min-width: 0;
}

.source-cookie-page .source-cookie-pool .source-cookie-identity,
.source-cookie-page .source-cookie-pool .source-cookie-quota,
.source-cookie-page .source-cookie-pool .source-cookie-actions,
.source-cookie-page .source-cookie-pool .cookie-proxy-summary {
  min-width: 0;
}

.source-cookie-page .source-cookie-identity > div {
  gap: 5px;
}

.baoku-cookie-created-at {
  display: block;
  overflow: hidden;
  color: #a99b77;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.baoku-cookie-rename-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 23px;
  padding: 0 7px;
  border: 1px solid rgba(218, 190, 126, .18);
  border-radius: 5px;
  color: #d8bd79;
  background: rgba(218, 190, 126, .06);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.baoku-cookie-rename-button:hover {
  border-color: rgba(218, 190, 126, .38);
  background: rgba(218, 190, 126, .11);
}

.baoku-cookie-rename-button svg {
  width: 12px;
  height: 12px;
}

.baoku-cookie-label-editor {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.baoku-cookie-label-editor input {
  width: min(148px, 40vw);
  min-width: 80px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(218, 190, 126, .22);
  border-radius: 5px;
  color: #f1ece0;
  background: #080c0b;
  font: inherit;
  font-size: 11px;
  outline: none;
}

.baoku-cookie-label-editor button {
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(218, 190, 126, .2);
  border-radius: 5px;
  color: #d8bd79;
  background: rgba(218, 190, 126, .07);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.baoku-cookie-label-editor button[type="button"] {
  color: #969b94;
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .035);
}

.baoku-cookie-label-editor button:disabled,
.baoku-cookie-label-editor input:disabled {
  opacity: .58;
  cursor: wait;
}

.baoku-cookie-notice {
  margin: 12px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(92, 190, 131, .23);
  border-radius: 6px;
  color: #83d7a3;
  background: rgba(92, 190, 131, .07);
  font-size: 11px;
}

.baoku-cookie-notice.is-error {
  border-color: rgba(224, 119, 91, .24);
  color: #edaa97;
  background: rgba(127, 50, 35, .15);
}

@container (max-width: 760px) {
  .source-cookie-page .source-cookie-pool .source-cookie-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
    row-gap: 13px;
  }

  .source-cookie-page .source-cookie-pool .source-cookie-identity {
    grid-column: 1;
    grid-row: 1;
  }

  .source-cookie-page .source-cookie-pool .source-cookie-actions {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .source-cookie-page .source-cookie-pool .source-cookie-quota {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .source-cookie-page .source-cookie-pool .cookie-proxy-summary,
  .source-cookie-page .source-cookie-pool .cookie-proxy-editor-wrap,
  .source-cookie-page .source-cookie-pool .cookie-proxy-test-row,
  .source-cookie-page .source-cookie-pool .source-cookie-error {
    grid-column: 1 / -1;
  }
}

@container (max-width: 440px) {
  .source-cookie-page .source-cookie-pool .source-cookie-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .source-cookie-page .source-cookie-pool .source-cookie-identity {
    grid-column: 1;
    grid-row: 1;
  }

  .source-cookie-page .source-cookie-pool .source-cookie-actions {
    grid-column: 1;
    grid-row: 2;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .source-cookie-page .source-cookie-pool .source-cookie-quota {
    grid-column: 1;
    grid-row: 3;
  }

  .source-cookie-page .source-cookie-pool .cookie-proxy-summary {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .source-cookie-page .source-cookie-pool .cookie-proxy-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .source-cookie-page .source-cookie-title-line {
    flex-wrap: wrap;
  }

  .baoku-cookie-label-editor {
    flex-wrap: wrap;
  }
}