.ai-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 18px;
}

.ai-control-card {
  min-width: 0;
}

.ai-status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.ai-status-item {
  padding: 15px 16px;
  border: 1px solid #ecedef;
  border-radius: 12px;
  background: #f8fbf9;
}

.ai-status-item span,
.ai-status-item small {
  display: block;
  color: #7b847e;
}

.ai-status-item strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.ai-secret-field {
  grid-column: 1 / -1;
  padding: 15px;
  border: 1px solid #dfe8e2;
  border-radius: 12px;
  background: #f7fbf8;
}

.ai-secret-field input {
  width: 100%;
  margin-top: 8px;
}

.ai-secret-help {
  display: block;
  margin-top: 8px;
  color: #717a74;
  font-size: 12px;
  line-height: 1.6;
}

.ai-secret-help.is-blocked,
.ai-control-message.is-error {
  color: #b73730;
}

.ai-control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  grid-column: 1 / -1;
}

.ai-control-actions button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #dfe6e1;
  border-radius: 12px;
  background: #f1f4f2;
  color: #172019;
  font-weight: 800;
}

.ai-control-actions button[data-ai-primary] {
  border-color: #2cff73;
  background: #2cff73;
  color: #0b1710;
}

.ai-control-actions button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.ai-control-message {
  min-height: 24px;
  margin: 14px 0 0;
  color: #68716b;
  font-size: 13px;
  line-height: 1.6;
}

.ai-usage-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ai-usage-summary article {
  padding: 14px;
  border: 1px solid #ecedef;
  border-radius: 12px;
  background: #fff;
}

.ai-usage-summary span,
.ai-usage-summary small {
  display: block;
  color: #7b847e;
}

.ai-usage-summary strong {
  display: block;
  margin: 5px 0;
  font-size: 24px;
}

.ai-usage-list {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
}

.ai-usage-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) minmax(100px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #ecedef;
  border-radius: 12px;
  background: #fafcfb;
  font-size: 12px;
}

.ai-usage-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-usage-row em {
  color: #747d77;
  font-style: normal;
}

@media (max-width: 980px) {
  .ai-control-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ai-status-strip { grid-template-columns: 1fr; }
  .ai-usage-summary { grid-template-columns: 1fr 1fr; }
  .ai-control-actions button { width: 100%; }
  .ai-usage-row { grid-template-columns: 1fr auto; }
  .ai-usage-row span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}